/* Attachments: the files on a proof or a comment. One stack, whichever component it sits in, so
   artwork looks the same on a card and in the thread. */
.attachments {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The artwork is the message. It fills whatever it is in and never more than it. */
.attachment-image {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.attachment a {
  color: var(--color-accent);
}

/* Artwork a browser cannot draw: the words where the picture would be, and each file to download
   (src/attachments.rs, `Undrawable`). Centred in a well or a card's picture box, in the body face. */
.undrawable {
  display: grid;
  gap: var(--space-2);
  max-width: 36ch;
  margin: auto;
  padding: var(--space-4);
  text-align: center;
}

.undrawable-said {
  margin: 0;
  color: var(--color-meta);
}

.undrawable .attachments {
  align-items: center;
}