/* The accounts' names on the site (the authors of the articles): hovered or focused, the account's card
   (plateforme/user-card.js), as on the platform (plateforme/platform.css). */
.user-name { cursor: help; border-bottom: 1px dotted currentColor; }
.user-card { position: fixed; z-index: 2100; display: flex; align-items: center; gap: .8rem; min-width: 220px; max-width: 320px; padding: .75rem .9rem;
    color: #f3e9d8; background: #1f160e; border: 1px solid #8a6a48; border-radius: 8px; box-shadow: 0 6px 20px #000a; pointer-events: none;
    font: .95rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left; }
.user-card[hidden] { display: none; }
.user-card-avatar { display: grid; flex: none; place-items: center; width: 64px; height: 64px; overflow: hidden; color: #1a120c; background: #d4af37; border-radius: 50%; font-size: 1.8rem; font-weight: 800; }
.user-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-card strong { display: block; font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
.user-card-role { display: inline-block; margin-top: .3rem; padding: .1rem .5rem; color: #1a120c; background: #b5a088; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.user-card-role.role-translator { background: #a6e3a1; }
.user-card-role.role-reviewer { background: #cba6f7; }
.user-card-role.role-admin { background: #f9e2af; }