.eb-field {
  display: flex;
  flex-direction: column;
  gap: var(--eb-space-2);
  min-width: 0;
}

.eb-field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eb-space-2);
}

.eb-field__label-row .eb-form-label {
  margin-bottom: 0;
}

.eb-field__optional {
  color: var(--eb-text-muted);
  font-size: var(--eb-type-meta-size-mobile);
  line-height: var(--eb-type-meta-line-height);
  white-space: nowrap;
}

.eb-field__control,
.eb-field__frame,
.eb-field__control-slot {
  min-width: 0;
}

/* Inside an affixed frame the input slot must fill the space left of the affix,
   so the input stretches edge-to-edge and the prefix/suffix sit flush. */
.eb-field__frame--affixed .eb-field__control-slot {
  flex: 1 1 auto;
}

.eb-field__frame--affixed {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--eb-border-default);
  background: var(--eb-bg-card);
  overflow: hidden;
  transition:
    border-color var(--eb-duration-base) var(--eb-ease-standard),
    box-shadow var(--eb-duration-base) var(--eb-ease-standard),
    background-color var(--eb-duration-base) var(--eb-ease-standard),
    color var(--eb-duration-base) var(--eb-ease-standard);
}

.eb-field__frame--affixed:hover {
  border-color: var(--eb-border-strong);
}

.eb-field__frame--affixed:focus-within {
  border-color: var(--eb-border-focus);
  box-shadow: 0 0 0 4px var(--eb-primary-700-08);
}

.eb-field__affix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 0.875rem;
  background: var(--eb-surface-subtle);
  color: var(--eb-text-secondary);
  font-size: var(--eb-type-body-small-size-mobile);
  font-weight: var(--eb-type-button-weight);
  line-height: 1;
  white-space: nowrap;
}

.eb-field__affix > button,
.eb-field__affix > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.eb-field__affix > button:focus-visible,
.eb-field__affix > a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--eb-primary-700-08);
  border-radius: var(--eb-radius-0);
}

.eb-field__affix--prefix {
  border-right: 1px solid var(--eb-border-default);
}

.eb-field__affix--suffix {
  border-left: 1px solid var(--eb-border-default);
}

.eb-field__frame--affixed .eb-form-control,
.eb-field__frame--affixed .eb-form-select {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.eb-field__frame--affixed .eb-form-control:focus,
.eb-field__frame--affixed .eb-form-select:focus {
  border-color: transparent;
  box-shadow: none;
}

.eb-field--invalid .eb-form-control,
.eb-field--invalid .eb-form-select {
  border-color: var(--eb-danger-600);
  background: var(--eb-danger-50);
}

.eb-field--invalid .eb-form-control:focus,
.eb-field--invalid .eb-form-select:focus {
  border-color: var(--eb-danger-600);
  box-shadow: 0 0 0 4px var(--eb-danger-600-06);
}

.eb-field--readonly .eb-form-control,
.eb-field--preview-readonly .eb-form-control {
  background: var(--eb-surface-subtle);
}

.eb-field--invalid .eb-field__frame--affixed,
.eb-field--preview-error .eb-field__frame--affixed {
  border-color: var(--eb-danger-600);
  background: var(--eb-danger-50);
}

.eb-field--invalid .eb-field__frame--affixed:focus-within,
.eb-field--preview-error .eb-field__frame--affixed {
  box-shadow: 0 0 0 4px var(--eb-danger-600-06);
}

.eb-field--disabled .eb-field__frame--affixed,
.eb-field--readonly .eb-field__frame--affixed,
.eb-field--preview-disabled .eb-field__frame--affixed,
.eb-field--preview-readonly .eb-field__frame--affixed {
  background: var(--eb-surface-subtle);
}

.eb-field--disabled .eb-field__affix,
.eb-field--readonly .eb-field__affix,
.eb-field--preview-disabled .eb-field__affix,
.eb-field--preview-readonly .eb-field__affix {
  color: var(--eb-text-muted);
}

.eb-field__support {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--eb-space-2);
}

.eb-field__support-main {
  flex: 1 1 auto;
  min-width: 0;
}

.eb-field__support-main .eb-field-hint,
.eb-field__support-main .eb-field-error,
.eb-field__support-main .eb-field__success {
  margin-top: 0;
}

.eb-field__support-meta {
  flex: 0 0 auto;
  color: var(--eb-text-muted);
  font-size: var(--eb-type-meta-size-mobile);
  line-height: var(--eb-type-meta-line-height);
  text-align: right;
  white-space: nowrap;
}

.eb-field__success {
  display: block;
  color: var(--eb-success-700, #15803d);
  font-size: var(--eb-type-meta-size-mobile);
  line-height: var(--eb-type-meta-line-height);
}

.eb-field--preview-hover .eb-form-control,
.eb-field--preview-hover .eb-form-select {
  border-color: var(--eb-border-strong);
}

.eb-field--preview-focus .eb-form-control,
.eb-field--preview-focus .eb-form-select {
  border-color: var(--eb-border-focus);
  box-shadow: 0 0 0 4px var(--eb-primary-700-08);
}

.eb-field--preview-focus .eb-field__frame--affixed {
  border-color: var(--eb-border-focus);
  box-shadow: 0 0 0 4px var(--eb-primary-700-08);
}

.eb-field--preview-error .eb-form-control,
.eb-field--preview-error .eb-form-select {
  border-color: var(--eb-danger-600);
  background: var(--eb-danger-50);
  box-shadow: 0 0 0 4px var(--eb-danger-600-06);
}

.eb-field--preview-disabled .eb-form-control,
.eb-field--preview-disabled .eb-form-select,
.eb-field--preview-readonly .eb-form-control,
.eb-field--preview-readonly .eb-form-select {
  background: var(--eb-surface-subtle);
  color: var(--eb-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

@media (max-width: 575.98px) {
  .eb-field__support {
    flex-direction: column;
  }

  .eb-field__support-meta {
    text-align: left;
    white-space: normal;
  }
}

/* ── File picker (x-forms.file) ───────────────────────────────────── */
:where(.eb-field, div):has(> .eb-file__input) {
  position: relative;
}

.eb-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.eb-file {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  border: 1px solid var(--eb-border-default);
  border-radius: var(--eb-radius-0);
  background: var(--eb-surface-subtle);
  cursor: pointer;
  transition:
    border-color var(--eb-duration-base) var(--eb-ease-standard),
    box-shadow var(--eb-duration-base) var(--eb-ease-standard);
}

.eb-file:hover {
  border-color: var(--eb-border-strong);
}

.eb-file__button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  border-right: 1px solid var(--eb-border-default);
  background: var(--eb-primary-50);
  color: var(--eb-primary-700);
  font-size: 0.9375rem;
  font-weight: 700;
}

.eb-file__icon {
  width: 1.125rem;
  height: 1.125rem;
}

.eb-file__name {
  display: block;
  flex: 1 1 auto;
  align-self: center;
  min-width: 0;
  padding: 0 0.875rem;
  overflow: hidden;
  color: var(--eb-text-muted);
  font-size: 0.875rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.eb-file__name.is-filled {
  color: var(--eb-text-primary);
}

.eb-file__input:focus-visible + .eb-file {
  border-color: var(--eb-border-focus);
  box-shadow: 0 0 0 4px var(--eb-primary-700-08);
}

.eb-file__input.is-invalid + .eb-file,
.was-validated .eb-file__input:invalid + .eb-file {
  border-color: var(--eb-danger-600);
  background: var(--eb-danger-50);
}

/* A field hint is an info icon right after the label; Optional stays on the far right. */
.eb-field__label-row { justify-content: flex-start; }
.eb-field__label-row .eb-field__optional { margin-left: auto; }
.eb-field__tip { flex: 0 0 auto; align-self: center; }