/* Scoped form refinements. Load after each page's existing form styles.
 * Keep labels, controls, help, validation, consent and honeypots in the DOM.
 * Label tracks grow with their text; no fixed label heights or clipped labels.
 */

/* The provider fields become paired only at the existing 1000px breakpoint.
 * Their former flow layout removed margin from the first child alone. In a
 * grid, remove all field margins and let the existing grid gap space the rows.
 */
@media (min-width: 1000px) {
  #professional-interest-form .h-form-fields { align-items: stretch; }
  #professional-interest-form .h-form-fields > .h-field:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    margin: 0;
  }
  #professional-interest-form .h-form-fields > .h-field > span {
    flex-grow: 1;
  }
  #professional-interest-form .h-form-fields > .h-field > :is(input, select, textarea) {
    flex-grow: 0;
    flex-shrink: 0;
  }
}

/* A wrapped support label must enlarge the shared label space, not push just
 * its own control down or stretch one control. Mobile remains single-column.
 */
@media (min-width: 821px) {
  form[name="knoq-support"] > .field-grid { align-items: stretch; }
  form[name="knoq-support"] > .field-grid > label:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
  form[name="knoq-support"] > .field-grid > label > span { flex-grow: 1; }
  form[name="knoq-support"] > .field-grid > label > :is(input, select, textarea) {
    flex-grow: 0;
    flex-shrink: 0;
  }
}

/* Investor help text is below the input and varies between paired fields.
 * Share three natural rows (label / control / help) so help cannot pull a
 * neighbouring control away from its matching baseline. Existing breakpoints,
 * fieldsets, radio choices and the separate question textarea are preserved.
 */
@media (min-width: 701px) {
  @supports (grid-template-rows: subgrid) {
    form[name="knoq-investor-access"] .form-grid:has(> label > small) {
      align-items: stretch;
    }
    form[name="knoq-investor-access"] .form-grid:has(> label > small) > label:not([hidden]) {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 8px;
      margin: 0;
    }
    form[name="knoq-investor-access"] .form-grid:has(> label > small) > label > span {
      grid-row: 1;
      align-self: start;
      margin: 0;
    }
    form[name="knoq-investor-access"] .form-grid:has(> label > small) > label > :is(input, select) {
      grid-row: 2;
      align-self: start;
      margin: 0;
    }
    form[name="knoq-investor-access"] .form-grid:has(> label > small) > label > small {
      grid-row: 3;
      align-self: start;
      margin: 0;
    }
  }
  @supports not (grid-template-rows: subgrid) {
    form[name="knoq-investor-access"] .form-grid { grid-template-columns: 1fr; }
  }
}

/* The new intake notes textarea was omitted from the old input/select rule.
 * Match those dark controls without touching the sharing invitation, support,
 * investor or intentionally porcelain First KNOQ feedback textareas.
 */
:is(#professional-interest-form, #customer-early-access-form) .h-field > textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 132px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #6e8074;
  border-radius: 6px;
  background: #0f1712;
  color: #f7faf5;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: none;
  resize: vertical;
}
:is(#professional-interest-form, #customer-early-access-form) .h-field > textarea:focus-visible {
  outline: 3px solid #ffd335;
  outline-offset: 5px;
}

/* First KNOQ has single-column questions, but paired radio/checkbox cards.
 * Let the visible card fill its existing label when adjacent copy wraps.
 */
#feedback-form .choice-grid > label { display: flex; }
#feedback-form .choice-grid > label > span { flex: 1; }