/* Pazar/Kervan domain layout; tabs, choices, cards and buttons come from style.css. */
.trade-box { min-width: 0; }
.trade-note { color: var(--text); font-size: var(--text-sm); line-height: 1.5; margin: var(--space-2) 2px; overflow-wrap: anywhere; }
.trade-options button { flex: 1 1 64px; }
.trade-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: var(--space-2); font-size: var(--text-sm); }
.trade-prices > div { background: var(--surface-inset); border-radius: var(--radius-md); padding: var(--space-2) var(--space-1); text-align: center; color: var(--ink); }
.trade-prices small, .trade-district small { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.trade-district { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.trade-district > b { min-width: 0; text-align: center; font-size: var(--text-sm); color: var(--ink); }
.trade-quote .grow { flex-basis: 180px; }
@media (max-width: 420px) { .trade-quote button { width: 100%; } }
/* Four resource options: 2×2 on phones, one row when the window is wide enough. */
#panel .seg.trade-options.resource-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container panel-body (min-width: 480px) { #panel .seg.trade-options.resource-options { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Kervansaray: three goods in one row, price cards with trend and reason, order-book rows. */
#panel .seg.trade-options.kv-goods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv-prices { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.kv-price { background: var(--surface-inset); border-radius: var(--radius-md); padding: var(--space-2); color: var(--ink); font-size: var(--text-sm); min-width: 0; }
.kv-price > b, .kv-price > span { display: block; }
.kv-price > span { margin-top: var(--space-1); font-variant-numeric: tabular-nums; }
.kv-why { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); line-height: 1.4; overflow-wrap: anywhere; }
.kv-trend { font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.kv-trend.up { color: var(--bad); }
.kv-trend.down { color: var(--good); }
.kv-row .grow { flex-basis: 180px; min-width: 0; }
.kv-row .grow small { display: block; overflow-wrap: anywhere; }
.kv-buy-feedback { color: var(--bad); font-weight: 700; padding: var(--space-2); border: 1px solid var(--bad); border-radius: var(--radius-sm); }
@media (max-width: 420px) { .kv-row button { width: 100%; } }