/* Shared onboarding fields. Existing ui-* hooks keep their controller behavior. */
.ui-v2 .ui-form {
  display: grid;
  gap: 12px;
}

.ui-v2 .ui-form-field,
.ui-v2 .onboarding-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.ui-v2 .ui-form-label,
.ui-v2 .onboarding-label {
  color: var(--color-onboarding-label);
  font-family: var(--font-onboarding-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.ui-v2 .ui-form-input,
.ui-v2 .ui-picker-trigger,
.ui-v2 .onboarding-input,
.ui-v2 .onboarding-select select {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  border: var(--border-default) solid var(--color-onboarding-field-border);
  border-radius: 999px;
  background: var(--color-onboarding-surface);
  color: var(--color-onboarding-ink);
  font-family: var(--font-onboarding-ui);
  font-size: 15px;
  font-weight: 400;
  appearance: none;
}

.ui-v2 .onboarding-input--large {
  height: 52px;
  padding: 0 28px;
  font-size: 18px;
}

.ui-v2 .ui-form-input::placeholder,
.ui-v2 .onboarding-input::placeholder {
  color: var(--color-onboarding-placeholder);
  opacity: 1;
}

.ui-v2 .ui-form-input:focus,
.ui-v2 .onboarding-input:focus,
.ui-v2 .onboarding-select select:focus,
.ui-v2 .ui-picker-trigger:focus-visible {
  outline: none;
  border-color: var(--color-onboarding-ink);
  box-shadow: 0 0 0 3px var(--color-onboarding-accent);
}

.ui-v2 .ui-form-input[aria-invalid="true"],
.ui-v2 .onboarding-input[aria-invalid="true"],
.ui-v2 .onboarding-select select[aria-invalid="true"],
.ui-v2 .ui-picker-trigger[aria-invalid="true"] {
  border-color: var(--color-onboarding-error);
}

.ui-v2 .onboarding-select {
  position: relative;
}

.ui-v2 .onboarding-select select {
  padding-right: 48px;
  cursor: pointer;
}

.ui-v2 .onboarding-select select:invalid {
  color: var(--color-onboarding-placeholder);
}

.ui-v2 .onboarding-select svg {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.ui-v2 .ui-form-note {
  margin: 0;
  color: var(--color-onboarding-muted);
  font-family: var(--font-onboarding-ui);
  font-size: 14px;
  line-height: 1.5;
}

.ui-v2 .ui-form-note--centered {
  text-align: center;
}

.ui-v2 .ui-form-note a {
  color: var(--color-onboarding-ink);
  text-underline-offset: 2px;
}

.ui-v2 .ui-form-note a:focus-visible {
  outline: 2px solid var(--color-onboarding-ink);
  outline-offset: 2px;
}

.ui-v2 .ui-form-message,
.ui-v2 .onboarding-error {
  margin: 0;
  color: var(--color-onboarding-muted);
  font-family: var(--font-onboarding-ui);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ui-v2 .ui-form-message--error,
.ui-v2 .onboarding-error {
  color: var(--color-onboarding-error);
}

.ui-v2 .ui-password-field,
.ui-v2 .onboarding-password {
  position: relative;
  min-width: 0;
}

.ui-v2 .ui-password-field .ui-form-input,
.ui-v2 .onboarding-password .onboarding-input {
  padding-right: 68px;
}

.ui-v2 .ui-password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  padding: 4px;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--color-onboarding-placeholder);
  font-family: var(--font-onboarding-ui);
  font-size: 13px;
  cursor: pointer;
}

.ui-v2 .onboarding-password__toggle {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
}

.ui-v2 .onboarding-password__toggle svg {
  width: 24px;
  height: 24px;
}

.ui-v2 .ui-password-toggle:hover,
.ui-v2 .ui-password-toggle:focus-visible {
  background: var(--color-onboarding-accent);
  color: var(--color-onboarding-ink);
}

.ui-v2 .ui-password-toggle:focus-visible {
  outline: 2px solid var(--color-onboarding-ink);
  outline-offset: 2px;
}

.ui-v2 .ui-form-check,
.ui-v2 .onboarding-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-onboarding-ink);
  font-family: var(--font-onboarding-ui);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.ui-v2 .ui-form-check input,
.ui-v2 .onboarding-check input {
  display: grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  place-content: center;
  border: var(--border-default) solid var(--color-onboarding-field-border);
  border-radius: 3px;
  background: var(--color-onboarding-surface);
  appearance: none;
  cursor: pointer;
}

.ui-v2 .ui-form-check input::after,
.ui-v2 .onboarding-check input::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--color-onboarding-surface);
  border-bottom: 2px solid var(--color-onboarding-surface);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
}

.ui-v2 .ui-form-check input:checked,
.ui-v2 .onboarding-check input:checked {
  border-color: var(--color-onboarding-ink);
  background: var(--color-onboarding-ink);
}

.ui-v2 .ui-form-check input:checked::after,
.ui-v2 .onboarding-check input:checked::after {
  opacity: 1;
}

.ui-v2 .ui-form-check input:focus-visible,
.ui-v2 .onboarding-check input:focus-visible {
  outline: 2px solid var(--color-onboarding-ink);
  outline-offset: 2px;
}

.ui-v2 .onboarding-check__copy {
  display: flex;
  flex-direction: column;
}

.ui-v2 .onboarding-check__title {
  font-weight: 500;
}

.ui-v2 .onboarding-check__helper {
  color: var(--color-onboarding-helper);
}