/* Styles for the trades cards (js/cards/trades.js). Same rules as css/story.css: cqw units, --dk-* variables, no color-mix, filters or clip-path. */

/* the one short line above a ranked list */
.tr-sum{margin:0;padding:2.2cqw 3cqw;border-radius:2.4cqw;background:rgba(var(--dk-pi-rgb),.07);font:600 3.5cqw/1.3 var(--dk-body);color:var(--dk-pi)}
.tr-sum b{font-weight:800}

/* ranked lists on these backs are the whole content, so they are drawn a little larger than the shared default */
.tr-list .dk-rank{padding:.9cqw 0}
.tr-list .dk-rank .n{font-size:3cqw}
.tr-list .dk-rank .tk-img{width:7.2cqw;height:7.2cqw;font-size:3cqw}
.tr-list .dk-rank .tk-sym,.tr-list .dk-rank .v{font-size:3.8cqw}
.tr-list .dk-rank .v small{font-size:3cqw}

/* a short list gets roomier rows so the back does not look empty */
.tr-roomy .dk-rank{padding:2.6cqw 0}
.tr-roomy .dk-rank .tk-img{width:8.4cqw;height:8.4cqw;font-size:3.4cqw}
.tr-roomy .dk-rank .tk-sym{font-size:4.2cqw}
.tr-roomy .dk-rank .v{font-size:4.2cqw}
.tr-roomy .dk-rank .v small{font-size:3cqw}

/* the graveyard front: a row of tombstones standing on a strip of ground */
.tr-yard{display:flex;align-items:flex-end;gap:2.4cqw;padding:0 2cqw;border-bottom:1.6cqw solid var(--dk-ink)}
.tr-stone{width:10cqw;height:auto;flex:none;display:block}
.tr-yard.on-panel{margin-top:5cqw;border-bottom-color:var(--dk-pi)}