@layer components {

/* ── Aegis TextField (ported from inputs-text-field--guidelines) ──
 * Three variants: outlined (default) / standard (underline) / filled
 * (light grey pill). Works for <input> AND <textarea>; for textarea
 * use .ds-input (Aegis "multiline" — same styling, larger min-height).
 * States: focus, hover, disabled, error. Helper text via .ds-field-helper. */

.ds-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  border: var(--border-width-1) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.ds-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.ds-input:hover { border-color: var(--color-text-secondary); }
.ds-input:focus,
.ds-input:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(63, 91, 255, 0.18);
}
.ds-input:disabled {
  cursor: not-allowed;
  color: var(--color-text-muted);
  background-color: var(--color-bg-surface-alt);
  border-color: var(--color-border-subtle);
}
.ds-input.is-error,
.ds-field.is-error .ds-input {
  border-color: var(--c-danger-500);
}
.ds-input.is-error:focus,
.ds-field.is-error .ds-input:focus {
  border-color: var(--c-danger-500);
  box-shadow: 0 0 0 3px rgba(255, 84, 84, 0.18);
}

.ds-input--rows-4 { min-height: 116px; }
.ds-input--rows-6 { min-height: 156px; }
.ds-input--rows-fixed { resize: none; }

/* Standard variant — underline only, no border/bg */
.ds-input--standard {
  background: transparent;
  border: none;
  border-bottom: var(--border-width-1) solid var(--color-border-default);
  border-radius: 0;
  padding: 6px 0;
}
.ds-input--standard:hover { border-bottom-color: var(--color-text-secondary); }
.ds-input--standard:focus,
.ds-input--standard:focus-visible {
  outline: none;
  border-bottom: var(--border-width-2) solid var(--color-border-focus);
  box-shadow: none;
  padding-bottom: 5px; /* compensate the 2px border so total height stays stable */
}
.ds-input--standard:disabled {
  background: transparent;
  border-bottom-style: dashed;
}
.ds-input--standard.is-error,
.ds-field.is-error .ds-input--standard {
  border-bottom-color: var(--c-danger-500);
}

/* Filled variant — light grey pill background */
.ds-input--filled {
  background-color: var(--color-bg-surface-alt);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-md);
}
.ds-input--filled:hover { background-color: var(--c-neutral-200); border-color: transparent; }
.ds-input--filled:focus,
.ds-input--filled:focus-visible {
  outline: none;
  background-color: var(--color-bg-surface-alt);
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(63, 91, 255, 0.18);
}
.ds-input--filled:disabled {
  background-color: var(--color-bg-surface-alt);
  opacity: 0.7;
}
.ds-input--filled.is-error,
.ds-field.is-error .ds-input--filled {
  background-color: rgba(255, 84, 84, 0.08);
  border-color: var(--c-danger-500);
}

/* Size variants — inherit from .ds-field--sm / --lg already defined */
.ds-field--sm .ds-input  { padding: 6px 10px; font-size: var(--font-size-xs); }
.ds-field--sm .ds-input--standard { padding: 4px 0; }
.ds-field--lg .ds-input  { padding: 12px 14px; font-size: var(--font-size-base); }
.ds-field--lg .ds-input--standard { padding: 8px 0; }

/* Helper text below the input — small, neutral; red on error */
.ds-field-helper {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-top: var(--space-1);
}
.ds-field.is-error .ds-field-helper { color: var(--c-danger-500); }
.ds-field.is-disabled .ds-field-helper { color: var(--color-text-muted); }

/* When .ds-field wraps an input/textarea — let it grow to its container */
.ds-field--block { display: flex; width: 100%; }


/* Merged from legacy styles.css */
/* Multiline (textarea) — reuses .ds-input; just add this for sizing */
textarea.ds-input { min-height: 96px; resize: vertical; line-height: 1.5; }
} /* end @layer components */