textarea,
input[type="email"],
input[type="text"] {
  border: solid 1px var(--stone-300);
  border-radius: 3px;
  box-sizing: border-box;
  color: var(--stone-600) !important;
  font-family: 'Noto Serif', serif;
  font-size: 1rem;
  outline: none;
  padding: 0.6rem;
}


/* compact layout */

.form-compact {
  display: grid;
  row-gap: 1.5rem;
  column-gap: 1rem;
  margin-top: 2rem;
}

.form-compact select,
.form-compact input[type="date"],
.form-compact input[type="time"],
.form-compact input[type="text"],
.form-compact input[type="password"],
.form-compact input[type="number"],
.form-compact input[type="email"],
.form-compact textarea {
  width: 100%;
}

.form-col2 {
  grid-template-columns: 1fr 1fr;
}

.form-col3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-col5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.form-compact .form-group:has(div > .form-span2) {
  grid-column: span 2;
}

.form-compact .form-group:has(div > .form-span3) {
  grid-column: span 3;
}

.form-compact .form-group:has(div > .form-span5) {
  grid-column: span 5;
}

.form-compact .form-span2 {
  grid-column: span 2;
}

.form-compact .form-span3 {
  grid-column: span 3;
}

.form-compact .form-span5 {
  grid-column: span 5;
}

.form-compact .form-group label {
  display: block;
  margin-bottom: 0.5rem;
}

.word-count {
  font-size: 0.9rem;
  /* color: var(--stone-500); */
}