/* =============================================================================
 * Input field — reusable form control (label + input + optional reveal).
 * Extracted from the auth screen; design-token driven, DM Sans.
 * Requires: design-tokens.css. Composes with the icon partial (reveal button).
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field__label {
  font-family: 'DM Sans', var(--font-sans);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-content-secondary);
}
.field__control {
  position: relative;
  display: flex;
}
.field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-prop); /* #202020 */
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-12);
  color: var(--color-content-primary);
  font-family: 'DM Sans', var(--font-sans);
  font-size: var(--font-size-body);
  line-height: 1.4;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.field__input::placeholder { color: var(--color-content-tertiary); }
.field__input:focus {
  outline: none;
  border-color: var(--color-content-accent);
  background-color: color-mix(in srgb, var(--color-surface-prop) 88%, #ffffff);
}
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-content-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface-prop) inset;
}
/* room for the trailing reveal button */
.field__input--reveal { padding-right: 44px; }

.field__reveal {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-content-tertiary);
  cursor: pointer;
  transition: color 0.18s ease;
}
.field__reveal:hover { color: var(--color-content-primary); }

.field__hint {
  font-family: 'DM Sans', var(--font-sans);
  font-size: var(--font-size-caption);
  color: var(--color-content-tertiary);
}
.field__hint--error { color: #f4b4b4; }
.field__hint--success { color: #79d69c; }