/* /traders, loaded after anomalies.css and weapons.css, which carry the HUD tokens, the title block,
   the section captions (.h2c), the ladder track and the redaction block (.unk3). */

/* the six slots, as the trader menu shows them */
.trow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.tw { display: grid; justify-items: center; gap: .5rem; padding: .75rem .5rem; border: 1px solid var(--h-line); background: var(--h-tile); text-align: center; }
.tw img { width: 4rem; height: 4rem; object-fit: cover; }
.tw .no { display: grid; place-items: center; width: 4rem; height: 4rem; background: #000; color: var(--h-ink3); font-size: 1.2rem; }
.tw b { display: block; font-size: .9375rem; font-weight: 600; }
.tw small { display: block; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--h-ink3); }
.tw.lock { opacity: .62; }

/* one section per trader */
.tsec { border-top: 1px solid var(--h-line); padding-top: 1.1rem; margin-top: 1.75rem; }
.tsec .line { margin: 0 0 .9rem; max-width: 70ch; color: var(--h-ink2); }
.kvt { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .3rem; }
.kvt div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .45rem .6rem; background: var(--h-tile); font-size: .8125rem; }
.kvt b { font-weight: 600; }
.kvt i { display: block; width: 6rem; height: .85em; background: #000; }

@media (max-width: 64rem) { .trow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .trow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tw img, .tw .no { width: 3.25rem; height: 3.25rem; } }