/* Trading Post: listing cards, offer boxes, pick grids. Mirrors bounties.css. */
.trade-head .row { align-items: center; }
.trade-head, .trade-filters { margin-bottom: 12px; }
.trade-filters { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.trade-filters label { display: flex; gap: 8px; align-items: center; }

.trade-list { display: grid; gap: 12px; margin-top: 12px; }
.trade-card {
  display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start;
}
.trade-face .card { width: 100%; }
.trade-missing {
  border: 1px dashed var(--line); border-radius: 12px; padding: 18px 10px; text-align: center;
}
.trade-cardname { font-size: 1.15rem; font-weight: 700; }
.trade-note { margin: 6px 0; font-style: italic; color: #ffd97a; }
.trade-offercount { margin: 6px 0; font-weight: 600; }
.trade-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.trade-actions .btn { margin-top: 0; } /* .btn.danger carries margin-top:10px in style.css */
.row .btn.danger { margin-top: 0; }
/* Small trading faces: the global 12px card radius dwarfs the 4px inner panel at
   120px, making the rarity ring lumpy and the inner corners look cut off. */
.trade-face .card { border-radius: 8px; }
.trade-face .cf { border-radius: 4px; }

.trade-detail { display: grid; grid-template-columns: 140px 1fr; gap: 14px; margin: 10px 0 4px; }
.trade-offers { display: grid; gap: 10px; margin: 8px 0 12px; }
.trade-offerbox { padding: 12px 14px; }
.trade-offerhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.trade-offerbody { display: flex; flex-direction: column; gap: 4px; }
.trade-offer-line { display: block; }

@media (max-width: 560px) {
  .trade-card { grid-template-columns: 84px 1fr; }
  .trade-detail { grid-template-columns: 96px 1fr; }
}

/* Offer cards as clickable faces (detail view) */
.trade-offerfaces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.trade-offerfaces .trade-face { width: 104px; flex: none; }