/*
 * VRI application-form polish.
 *
 * Shared, presentation-only refinement for Student Registration and the Mentor
 * Application. The existing form modules remain the sole owners of field names,
 * DOM behavior, validation, workflow state, submission, payment, uploads, and
 * proposal/editor logic.
 *
 * Design direction: use the Scheduler's calm hierarchy and flat control geometry
 * without creating a second interaction system. Selectors deliberately target
 * only these two application roots and, for ordinary controls, only direct field
 * children so specialized nested editors remain untouched unless explicitly
 * named below as presentation-owned controls.
 */

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app) {
  --vri-app-control-height: 50px;
  --vri-app-control-radius: 10px;
  --vri-app-surface-radius: var(--radius-xl);
  --vri-app-control-border: rgba(4, 76, 89, 0.20);
  --vri-app-rule: rgba(4, 76, 89, 0.11);
}

/* One stable architectural plane; depth belongs to the form, not every field. */
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-section-card {
  border-radius: var(--vri-app-surface-radius) !important;
  border-color: rgba(4, 76, 89, 0.13) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 14px 32px rgba(16, 33, 42, 0.05) !important;
}

/* Calm hierarchy: compact eyebrow, confident serif step title, quiet subsections. */
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-section-head {
  margin-bottom: 24px;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-section-head .session-kicker {
  margin-bottom: 7px;
  color: var(--teal-700);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-section-titleline h2,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-section-titleline h3 {
  margin: 0;
  color: var(--teal-950);
  font-family: var(--vri-font-display);
  font-size: clamp(1.8rem, 2.2vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.03;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  :is(
    .registration-form-subsection-head h4,
    .registration-form-subsection-title,
    .registration-subsection-title,
    .mentor-form-subsection-head h4,
    .mentor-agreement-section h4,
    .mentor-inline-panel h4
  ) {
  color: var(--teal-950);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  :is(.registration-form-subsection-head p, .mentor-form-subsection-head p) {
  color: var(--muted);
  line-height: 1.55;
}

/* Labels read as labels rather than a second tier of mini-headlines. */
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  :is(
    .registration-field > span:first-child,
    .mentor-choice-title,
    .registration-choice-titleline > span:first-child,
    .registration-checkbox-field > span:first-child,
    .registration-radio-field > span:first-child
  ) {
  margin-left: 0;
  color: #243b43;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  :is(
    .registration-field > span:first-child,
    .mentor-choice-title,
    .registration-choice-titleline > span:first-child,
    .registration-checkbox-field > span:first-child,
    .registration-radio-field > span:first-child
  ) strong {
  color: var(--gold-800);
  font-weight: 800;
}

/* Keep runtime Step 3 layout helpers from reintroducing the old mini-heading typography. */
body.mentor-application-page #mentor-application-app
  .registration-field:has(> select[name="weeklyAvailability"]) > span:first-child,
body.mentor-application-page #mentor-application-app
  .registration-field:has(> select[name="annualPoolInterest"]) > span:first-child {
  font-size: 0.82rem !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}

/*
 * Scheduler-inspired ordinary controls. Direct-child combinators are intentional:
 * nested proposal/source editors, payment elements, and specialized widgets are
 * not standard fields and must keep their own geometry.
 */
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > select,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > textarea {
  border: 1px solid var(--vri-app-control-border) !important;
  border-radius: var(--vri-app-control-radius) !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > select {
  min-height: var(--vri-app-control-height) !important;
  height: auto;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > textarea {
  min-height: 112px;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):hover,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > select:hover,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > textarea:hover {
  border-color: rgba(4, 76, 89, 0.30) !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):focus,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > select:focus,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > textarea:focus {
  border-color: rgba(4, 76, 89, 0.42) !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(4, 76, 89, 0.075) !important;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):focus-visible,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > select:focus-visible,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > textarea:focus-visible {
  outline: 3px solid rgba(229, 181, 59, 0.42) !important;
  outline-offset: 2px !important;
}

/* The Step 2 skills guardrail used to lock these selects to the old 56px geometry. */
body.register-page #registration-app
  [data-vri-academic-elegance]
  .vri-academic-primary-fields-skills
  > .registration-field
  > select {
  height: var(--vri-app-control-height) !important;
  min-height: var(--vri-app-control-height) !important;
  max-height: var(--vri-app-control-height) !important;
}

/* Mentor uploads keep their file-selection behavior but use the same flatter shell. */
body.mentor-application-page #mentor-application-app .vri-file-picker-control {
  min-height: var(--vri-app-control-height) !important;
  border: 1px solid var(--vri-app-control-border) !important;
  border-radius: var(--vri-app-control-radius) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* The nested software "other" field is an ordinary text control despite its specialized wrapper. */
body.mentor-application-page #mentor-application-app
  .vri-software-other > input[data-vri-software-other] {
  width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  margin-top: 5px !important;
  padding: 0 12px !important;
  border: 1px solid var(--vri-app-control-border) !important;
  border-radius: var(--vri-app-control-radius) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font: inherit !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

body.mentor-application-page #mentor-application-app
  .vri-software-other > input[data-vri-software-other]:hover {
  border-color: rgba(4, 76, 89, 0.30) !important;
  box-shadow: none !important;
}

body.mentor-application-page #mentor-application-app
  .vri-software-other > input[data-vri-software-other]:focus-visible {
  border-color: rgba(4, 76, 89, 0.42) !important;
  outline: 3px solid rgba(229, 181, 59, 0.42) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(4, 76, 89, 0.075) !important;
}

/* Mentor Step 5: one divider, required marker, and comfortable bottom breathing room. */
body.mentor-application-page #mentor-application-app .vri-schedule-panel {
  padding-bottom: 16px !important;
}

body.mentor-application-page #mentor-application-app .vri-schedule-meta-row {
  margin-top: 12px !important;
  padding-top: 12px !important;
}

body.mentor-application-page #mentor-application-app .vri-schedule-select > span::after {
  content: " *";
  color: var(--gold-800);
  font-weight: 800;
}

/* Validation stays clear without restoring the old floating depth. */
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field.has-validation-error > input:not([type="checkbox"]):not([type="radio"]),
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field.has-validation-error > select,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field.has-validation-error > textarea,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > input[aria-invalid="true"],
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > select[aria-invalid="true"],
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-field > textarea[aria-invalid="true"] {
  border-color: rgba(157, 58, 32, 0.50) !important;
  box-shadow: none !important;
}

/* Fine rules and whitespace do the subsection organizing. */
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  :is(.registration-form-subsection, .mentor-form-subsection) {
  border-top-color: var(--vri-app-rule) !important;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-section-card > .registration-form-actions {
  border-top-color: var(--vri-app-rule) !important;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-helper-text {
  line-height: 1.55;
}

/* Reduce nested-card depth in the academic step without changing its grouping logic. */
body.register-page #registration-app [data-vri-academic-elegance] .registration-academic-overview-grid,
body.register-page #registration-app [data-vri-academic-elegance] .vri-academic-primary-card,
body.register-page #registration-app [data-vri-academic-elegance] .vri-coursework-disclosure,
body.register-page #registration-app [data-vri-academic-elegance] .registration-academic-related,
body.register-page #registration-app [data-vri-academic-elegance] .registration-academic-support,
body.register-page #registration-app [data-vri-academic-elegance] .registration-pathway-guidance,
body.register-page #registration-app [data-vri-academic-elegance] .registration-academic-performance-context {
  border-radius: var(--vri-app-control-radius) !important;
  box-shadow: none !important;
}

body.register-page #registration-app [data-vri-academic-elegance] .vri-coursework-group {
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Informational blocks stay legible but stop reading as additional floating cards. */
body.mentor-application-page #mentor-application-app .mentor-form-note,
body.mentor-application-page #mentor-application-app .mentor-eligibility-attestations > div {
  border-radius: var(--vri-app-control-radius) !important;
  box-shadow: none !important;
}

/* Mentor Step 6: align Engagement terms and the electronic signature as one final row. */
body.mentor-application-page #mentor-application-app
  .registration-section-card:has(input[name="electronicSignature"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
}

body.mentor-application-page #mentor-application-app
  .registration-section-card:has(input[name="electronicSignature"])
  > :is(.registration-section-head, .registration-summary-card, .registration-form-actions),
body.mentor-application-page #mentor-application-app
  .registration-section-card:has(input[name="electronicSignature"])
  > .mentor-agreement-section:not(:has(input[name="contractorAcknowledgment"])) {
  grid-column: 1 / -1;
}

body.mentor-application-page #mentor-application-app
  .registration-section-card:has(input[name="electronicSignature"])
  > .mentor-agreement-section:has(input[name="contractorAcknowledgment"]) {
  grid-column: 1;
  min-width: 0;
}

body.mentor-application-page #mentor-application-app
  .registration-section-card:has(input[name="electronicSignature"])
  > .mentor-form-grid:has(input[name="electronicSignature"]) {
  grid-column: 2;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start;
  min-width: 0;
  margin-top: 0 !important;
  padding: 26px 0 8px;
  border-top: 1px solid var(--vri-app-rule);
}

body.mentor-application-page #mentor-application-app
  .mentor-form-grid:has(input[name="electronicSignature"]) > [aria-hidden="true"] {
  display: none !important;
}

body.mentor-application-page #mentor-application-app
  .mentor-form-grid:has(input[name="electronicSignature"])
  > .registration-field:has(> input[name="electronicSignature"]) {
  grid-column: 1 / -1 !important;
  width: 100%;
  margin: 0 !important;
}

/*
 * Student Research Preferences: keep the rounded architectural shell but flatten
 * the Term / Pathway / Session controls to match the calmer form vocabulary.
 */
body.register-page #registration-app .registration-controls {
  gap: 18px !important;
  padding: 20px !important;
  border: 1px solid rgba(4, 76, 89, 0.13) !important;
  border-radius: var(--vri-app-surface-radius) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 14px 32px rgba(16, 33, 42, 0.05) !important;
}

body.register-page #registration-app .registration-choice-label {
  color: var(--teal-700) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.2 !important;
}

body.register-page #registration-app .registration-custom-select-trigger {
  min-height: var(--vri-app-control-height) !important;
  padding: 0 16px !important;
  border: 1px solid var(--vri-app-control-border) !important;
  border-radius: var(--vri-app-control-radius) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  transform: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease !important;
}

body.register-page #registration-app .registration-custom-select-trigger:hover {
  border-color: rgba(4, 76, 89, 0.30) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

body.register-page #registration-app .registration-custom-select-trigger:focus-visible,
body.register-page #registration-app .registration-custom-select.is-open .registration-custom-select-trigger {
  border-color: rgba(4, 76, 89, 0.42) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(4, 76, 89, 0.075) !important;
  outline: none !important;
  transform: none !important;
}

body.register-page #registration-app .registration-custom-select-menu {
  border: 1px solid rgba(4, 76, 89, 0.14) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 32px rgba(16, 33, 42, 0.10) !important;
}

body.register-page #registration-app .registration-custom-select-option {
  min-height: 42px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  transform: none !important;
}

body.register-page #registration-app .registration-custom-select-option[aria-selected="true"] {
  border-color: rgba(4, 76, 89, 0.15) !important;
  background: rgba(4, 76, 89, 0.07) !important;
  box-shadow: none !important;
  color: var(--teal-950) !important;
}

/*
 * The post-submit status card and review-process tiles are direct children of the
 * Mentor Application root. Once that result state is present, give the entire
 * result one white architectural backing surface so the individual tiles no
 * longer appear to float directly on the page background.
 */
body.mentor-application-page #mentor-application-app:has(> .mentor-review-process) {
  box-sizing: border-box;
  padding: 20px !important;
  border: 1px solid rgba(4, 76, 89, 0.11);
  border-radius: var(--vri-app-surface-radius);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 42px rgba(16, 33, 42, 0.07);
}

body.mentor-application-page #mentor-application-app:has(> .mentor-review-process)
  > .registration-section-card:first-child {
  margin-top: 0 !important;
}

body.mentor-application-page #mentor-application-app:has(> .mentor-review-process)
  > .mentor-review-process {
  margin-top: 28px;
}

/*
 * Progress navigation keeps every existing step, click target, and focus contract,
 * but removes the nested floating-card treatment.
 */
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-step-indicator {
  padding: 8px 10px !important;
  border: 1px solid rgba(4, 76, 89, 0.11) !important;
  border-radius: var(--radius-lg) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-step {
  min-height: 44px;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-step:hover {
  background: rgba(4, 76, 89, 0.045) !important;
  box-shadow: none !important;
  transform: none !important;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-step.is-active,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-step.is-active:hover,
:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-step.is-active:focus-visible {
  background: var(--teal-900) !important;
  box-shadow: none !important;
  transform: none !important;
}

:is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
  .registration-step-number {
  box-shadow: none !important;
}

@media (max-width: 920px) {
  body.mentor-application-page #mentor-application-app
    .registration-section-card:has(input[name="electronicSignature"]) {
    grid-template-columns: 1fr;
  }

  body.mentor-application-page #mentor-application-app
    .registration-section-card:has(input[name="electronicSignature"])
    > .mentor-agreement-section:has(input[name="contractorAcknowledgment"]),
  body.mentor-application-page #mentor-application-app
    .registration-section-card:has(input[name="electronicSignature"])
    > .mentor-form-grid:has(input[name="electronicSignature"]) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  :is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app) {
    --vri-app-control-height: 50px;
    --vri-app-control-radius: 9px;
    --vri-app-surface-radius: var(--radius-lg);
  }

  :is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
    .registration-section-titleline h2,
  :is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
    .registration-section-titleline h3 {
    font-size: 1.75rem;
  }

  :is(body.register-page #registration-app, body.mentor-application-page #mentor-application-app)
    .registration-step-indicator {
    padding: 8px !important;
    border-radius: var(--radius-md) !important;
  }

  body.register-page #registration-app .registration-controls {
    padding: 16px !important;
  }

  body.mentor-application-page #mentor-application-app:has(> .mentor-review-process) {
    padding: 14px !important;
  }
}