/* ===================================================================
   Reader's notes: the list under a provision, its editor, and the
   standalone notes page.  Editor and note-list buttons compose `.btn` /
   `.btn-primary` (primitives.css) rather than styling their own.
   ================================================================== */

.notes:empty { display: none; }

.note {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-6);
  background: var(--note-bg);
  border-left: 3px solid var(--note);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--sans);
  font-size: var(--text-md);
  line-height: 1.5;
}
.note p { margin: 0 0 var(--space-4); white-space: pre-wrap; }
.note .meta {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  color: var(--faint);
  font-size: var(--text-2xs);
}
.note .meta button {
  background: none; border: 0; padding: 0;
  color: var(--faint); cursor: pointer; font: inherit;
}
.note .meta button:hover { color: var(--accent); }

.editor { margin: var(--space-4) 0 0; font-family: var(--sans); }
.editor textarea {
  width: 100%;
  min-height: 5.5rem;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
.editor textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.editor .row { display: flex; gap: var(--space-4); margin-top: .45rem; align-items: center; }
.editor .cite { color: var(--faint); font-size: var(--text-xs); margin-right: auto; }

.note-actions { display: flex; gap: var(--space-4); margin-bottom: var(--space-10); }

/* ------------------------------------------------------- subscribe form */

.subscribe-form { display: flex; gap: var(--space-4); font-family: var(--sans); }
.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-md);
}
.subscribe-form input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.subscribe-form input[type="submit"] {
  padding: var(--space-3) .9rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--sans);
  font-size: var(--text-sm);
  cursor: pointer;
}
.subscribe-form input[type="submit"]:hover { filter: brightness(1.08); }
/* A field named to invite a bot and never shown to a person -- see
   app/controllers/subscribers_controller.rb. Off-screen rather than
   `display: none`, since some bots skip fields that can't render at all. */
.subscribe-form .hp { position: absolute; left: -9999px; }
.form-message { font-family: var(--sans); font-size: var(--text-sm); margin: 0 0 var(--space-5); }
.form-message.success { color: var(--accent); }
.form-message.error { color: var(--bad); }