/* market: styles of this screen only, classes start with .market- */
.market-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.market-find { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; max-width: 320px; padding-left: 10px; background: var(--s2); border: 1px solid var(--line-2); color: var(--ink-3); }
.market-find:focus-within { border-color: var(--ink-3); }
.market-search { border: 0; background: transparent; padding-left: 0; }
.market-sets { display: flex; gap: 6px; }
.market-set { all: unset; cursor: pointer; display: flex; align-items: center; padding: 0 10px; font-family: var(--font-num); font-size: 11px; color: var(--ink-3);
  background: var(--s1); border: 1px solid var(--line-2); border-left: 2px solid var(--set); }
.market-set:hover { color: var(--ink); border-color: var(--ink-3); border-left-color: var(--set); }
.market-set.active { color: var(--ink); background: var(--s3); }
.market-set:focus-visible, .market-seg button:focus-visible { outline: 1px solid var(--signal); outline-offset: 2px; }
.market-rarity { width: auto; padding: 6px 10px; }
.market-seg { display: flex; margin-left: auto; border: 1px solid var(--line-2); background: var(--s1); }
.market-seg button { all: unset; cursor: pointer; padding: 7px 12px; font-size: 12.5px; color: var(--ink-3); border-left: 1px solid var(--line-2); }
.market-seg button:first-child { border-left: 0; }
.market-seg button.active { background: var(--s3); color: var(--ink); }
.market-body { display: flex; flex-direction: column; gap: 16px; }
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.market-tile { display: flex; flex-direction: column; gap: 5px; padding: 10px; background: var(--s1); border: 1px solid var(--line-2); min-width: 0; }
.market-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.market-main { font-size: 19px; color: var(--ink); }
.market-meta { font-size: 12px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.market-meta.id { color: var(--ink-3); font-size: 10.5px; }
.market-you { margin-left: auto; }
.market-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.market-small { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.market-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.market-lab { margin-bottom: 8px; }
.market-lab.give { color: var(--zone-give); } .market-lab.get { color: var(--zone-get); }
@media (max-width: 760px) {
  .market-seg { margin-left: 0; }
  .market-find { max-width: none; flex-basis: 100%; }
  .market-sets { flex-wrap: wrap; }
  .market-set { padding: 6px 10px; }
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-pair, .market-sheet { grid-template-columns: 1fr; }
}
.market-sheet > * { min-width: 0; }
.market-sheet .card-row { flex-wrap: wrap; }
.market-price { flex-wrap: wrap; }
.market-main { white-space: nowrap; }
.market-pair > *, .market-small > * { min-width: 0; }
.market-small .card-strip { flex: 1 1 100%; max-width: 100%; }
  @media (max-width: 760px) { .market-pair { grid-template-columns: minmax(0, 1fr); } }