/* KKB — Gravity Forms skin.
   Maps Gravity Forms' markup onto the Air Fill form tokens so the embedded form
   (the notify form in the bottom sheet) matches the app's native fields. Token-only
   — no new values, just GF selectors pointed at the existing --wp--preset--* / --ios-*
   tokens (mirrors .field / .field__input / .btn in controls.css + components.css).

   Scoped to .sheet: (a) the sheet is where GF is used, and (b) the extra class raises
   specificity above GF's own defaults so these win regardless of enqueue order.
   Loads after components.css. If a field type still looks off, drop it into form 1 and
   we'll extend the selectors. */

.sheet .gform_wrapper form { margin: 0; }
.sheet .gform_wrapper .gform_fields { display: grid; gap: var(--wp--preset--spacing--30); }
.sheet .gform_wrapper .gfield { margin: 0; padding: 0; }

/* ---- Labels (like .field__label) --------------------------------------- */
.sheet .gform_wrapper .gfield_label {
  display: block;
  margin: 0 0 var(--wp--preset--spacing--20);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}
.sheet .gform_wrapper .gfield_required { color: var(--wp--preset--color--coral-deep); }

/* ---- Text-like inputs, textarea, select (like .field__input) ----------- */
.sheet .gform_wrapper .ginput_container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.sheet .gform_wrapper .ginput_container textarea,
.sheet .gform_wrapper .ginput_container select {
  width: 100%;
  min-height: var(--ios-control-height-lg);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border: 1px solid var(--ios-hairline-color);
  border-radius: var(--ios-radius-md);
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent; /* beat Gravity Forms' own input tap-highlight on iOS */
}
.sheet .gform_wrapper .ginput_container textarea {
  min-height: calc(var(--ios-control-height-lg) * 2);
  padding-block: var(--wp--preset--spacing--30);
}
.sheet .gform_wrapper .ginput_container input:focus,
.sheet .gform_wrapper .ginput_container textarea:focus,
.sheet .gform_wrapper .ginput_container select:focus {
  outline: none;
  border-color: var(--wp--preset--color--coral);
  box-shadow: var(--ios-focus-ring);
}
.sheet .gform_wrapper .ginput_container input::placeholder,
.sheet .gform_wrapper .ginput_container textarea::placeholder { color: var(--wp--preset--color--muted); }

/* ---- Submit button (like .btn.btn--lg, full width in the sheet) -------- */
.sheet .gform_wrapper .gform_footer { margin: var(--wp--preset--spacing--40) 0 0; padding: 0; }
.sheet .gform_wrapper .gform_footer input[type="submit"],
.sheet .gform_wrapper .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ios-control-height-lg);
  padding: 0 var(--wp--preset--spacing--50);
  border: 0;
  border-radius: var(--ios-radius-md);
  background: var(--wp--preset--color--coral);
  color: var(--wp--preset--color--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--lg);
  cursor: pointer;
  transition: background-color var(--ios-duration-fast) var(--ios-ease-out),
              transform var(--ios-duration-fast) var(--ios-ease-out);
}
.sheet .gform_wrapper .gform_footer input[type="submit"]:active,
.sheet .gform_wrapper .gform_button:active { transform: scale(0.98); }
@media (hover: hover) {
  .sheet .gform_wrapper .gform_footer input[type="submit"]:hover,
  .sheet .gform_wrapper .gform_button:hover { background: var(--wp--preset--color--rose); }
}

/* ---- Field description / sublabel --------------------------------------- */
.sheet .gform_wrapper .gfield_description {
  margin-block-start: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
}

/* ---- Validation (brand danger colour) ---------------------------------- */
.sheet .gform_wrapper .gfield_error input,
.sheet .gform_wrapper .gfield_error textarea,
.sheet .gform_wrapper .gfield_error select { border-color: var(--wp--preset--color--coral-deep); }
.sheet .gform_wrapper .validation_message,
.sheet .gform_wrapper .gfield_validation_message {
  margin-block-start: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--coral-deep);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
}
.sheet .gform_wrapper .gform_validation_errors {
  margin: 0 0 var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--coral-deep);
  border-radius: var(--ios-radius-md);
  background: color-mix(in srgb, var(--wp--preset--color--coral) 8%, var(--wp--preset--color--paper));
}
.sheet .gform_wrapper .gform_validation_errors > h2 {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--ink);
}

/* ---- Confirmation message after AJAX submit ---------------------------- */
.sheet .gform_confirmation_message {
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--base);
}