select {
  width: 100%;
}

textarea {
  resize: vertical;
  height: 8em;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.inline-input {
  display: flex;
  flex-direction: row;
  column-gap: 0.5em;
}
.field > .inline-input > input {
  align-self: stretch;
  width: 100%;
}
.field > .inline-input > button {
  align-self: flex-end;
}

.readings {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.readings > .reading {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
  flex-grow: 1;
  width: 40ch;

  background: white;
  border: 1px solid var(--line-color);
  border-radius: 4px;
}
.readings > .reading > .title {
  font-size: large;
  color: var(--vn-primary-color);

  border-bottom: 1px solid var(--line-color);
}

.controls {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}