/* The Berichten screen (editor/berichten.js): one card per message, opened on a tap, mobile first. */
.messages .message-list { display: grid; gap: 10px; }
.messages .message { padding: 0; overflow: hidden; }
.messages .message-head { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 12px 14px; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.messages .message.unread .message-title { font-weight: 700; }
.messages .message-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.messages .message-meta { font-size: 14px; }
.messages .message-glimpse { overflow-wrap: anywhere; }
.messages .message-body { padding: 0 14px 14px; }
.messages .message-fields { margin: 0 0 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.messages .message-fields dt { font-size: 14px; color: var(--muted); margin-top: 8px; }
.messages .message-fields dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.messages .message-status:empty { display: none; }
.messages .row a.button { display: inline-flex; align-items: center; min-height: 44px; }
/* The count of unread messages on the Berichten item, in the bottom bar and the side menu. */
.unread-count { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; }