/* Cards shown small under a message, a forum topic or a comment. */
.card-embeds { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 2px; }
.card-embed { display: block; width: 104px; color: inherit; text-decoration: none; transition: transform .15s ease; }
.card-embed:hover, .card-embed:focus-visible { transform: translateY(-3px) rotate(-1deg); }
.card-embed:focus-visible { outline: 3px solid #8850d1; outline-offset: 3px; }
.card-embed-stage { display: block; width: 340px; zoom: calc(104 / 340); }
.card-embed-stage .trading-card { width: 340px; }
.card-embed-stage > img { display: block; width: 340px; aspect-ratio: 5 / 7; object-fit: cover; border: 6px solid #25252d; border-radius: 18px; }
@media (max-width: 480px) {
    .card-embed { width: 84px; }
    .card-embed-stage { zoom: calc(84 / 340); }
}

/* "Add a card", beside where you type. */
.card-embed-picker { position: relative; }
.forum-composer-actions .card-embed-picker { margin-right: auto; }
/* In a conversation it sits on a line of its own, under where you type. */
.messages-compose { flex-wrap: wrap; }
.messages-compose .card-embed-picker { flex: 1 0 100%; order: 1; }
.card-embed-picker .card-embed-add { padding: 4px 10px; white-space: nowrap; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); box-shadow: none; color: var(--text-dark); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
/* The picker "Add a card" opens (components/card-embed-picker.html) is the showcase slots' one, a little denser. */
.card-embed-dialog .picker-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }