.notes-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.notes-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.notes-field label {
  font-size: .86rem;
  font-weight: 700;
}

.notes-field textarea {
  display: block;
  width: 100%;
  min-height: 5.8rem;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--foreground);
  font: inherit;
  padding: 8px 10px;
}

.notes-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 15px;
  margin-top: 9px;
  font-size: .82rem;
}

.notes-meta a {
  margin-inline-start: auto;
}

.notes-list {
  display: grid;
  gap: 12px;
}

.notes-card {
  padding: 16px 19px;
}

.notes-card h2 {
  margin-bottom: 9px;
}

.notes-card .button {
  margin-top: 12px;
}

.notes-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.notes-card dt {
  color: var(--muted-foreground);
  font-size: .83rem;
  font-weight: 700;
}

.notes-card dd {
  margin-top: 4px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (max-width: 580px) {
  .notes-fields,
  .notes-card dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .notes-meta a {
    margin-inline-start: 0;
  }
}