.field-row {
  box-shadow: inset 3px 0 0 transparent;
  transition: box-shadow 120ms ease;
}

.field-row:focus-within {
  box-shadow: inset 3px 0 0 var(--color-teal-500);
}

.field-row[data-state="invalid"] {
  box-shadow: inset 3px 0 0 #DC2626;
}

.field-row[data-state="valid"] {
  box-shadow: inset 3px 0 0 var(--color-moss-500);
}

.field-row__label {
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-400);
}

.field-row:focus-within .field-row__label {
  color: var(--color-teal-600);
}

.field-row[data-state="invalid"] .field-row__label {
  color: #DC2626;
}

.field-row[data-state="valid"] .field-row__label {
  color: var(--color-moss-600);
}

.field-row__status {
  display: none;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: #DC2626;
}

.field-row[data-state="invalid"] .field-row__status {
  display: inline;
}

.field-row[data-state="valid"] .field-row__status {
  display: inline;
  color: var(--color-moss-600);
}

.field-row__input {
  width: 100%;
  background: transparent;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--color-ink-900);
}

.field-row__input::placeholder {
  color: var(--color-ink-300);
}

.field-row__input:focus {
  outline: none;
}

.field-row__input--password {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

.field-row__caret {
  display: none;
  width: 1.5px;
  height: 19px;
  background: var(--color-teal-500);
}

.field-row:focus-within .field-row__caret {
  display: block;
}

.field-row__toggle {
  font: 600 11.5px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--color-ink-500);
  cursor: pointer;
}

.field-row__prefix {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--color-ink-300);
}

.field-row__icon {
  display: none;
  flex: none;
  color: var(--color-moss-600);
}

.field-row[data-state="valid"] .field-row__icon {
  display: inline-flex;
}

.field-row__hint {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-ink-500);
}

.field-row[data-state="invalid"] .field-row__hint {
  color: #DC2626;
}