/* Notes feature (003-notes) — plain CSS for the list, detail, form, and empty
   states. Loaded per-page via content_for(:head) on the notes views. */

.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notes-list .note {
  padding: 0.75rem 1rem;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.notes-list .note a {
  text-decoration: none;
  font-weight: 600;
}

/* Detail view. pre-wrap preserves the author's line breaks while default ERB
   escaping keeps the text inert; overflow-wrap breaks long unspaced strings so
   they can't overflow the column. */
.note-detail {
  max-width: 42rem;
}

.note-content {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0;
}

.note-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

/* Form */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
  max-width: 42rem;
}

.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.5rem;
}

.form-errors {
  border: 1px solid #b3261e;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  color: #b3261e;
}

.field-error {
  display: block;
}

/* Empty states */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #555;
}

.empty-state .new-note {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #888;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

.empty-page {
  color: #555;
}