/* Player market, trading parts (src/market.html, assets/market.js): the Buy and Sell tabs,
   the chain picker and gas note in the buy sheet, the bridge hint, the sell list and the
   list sheet. Mobile first, the same Arceus tokens as market.css (prefix mk-). */

/* ── tabs ─────────────────────────────────────────────────────────────── */
.mk-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin-bottom: 12px; border-radius: 14px;
  background: var(--a-smoke-hi, #1A1D29); box-shadow: var(--a-rim, inset 0 0 0 1px rgba(255, 255, 255, .1)); }
.mk-tab { min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--a-soft, #C9C3B3); font: 700 15px var(--a-body); cursor: pointer; }
.mk-tab[aria-selected="true"] { background: var(--a-cream, #F4EEDC); color: var(--a-ink, #1F2430); }
.mk-tab:focus-visible { outline: 2px solid var(--a-gold-hi, #FED654); outline-offset: 2px; }
@media (min-width: 720px) { .mk-tabs { width: 360px; } }
[role="tabpanel"][hidden] { display: none; }

/* ── cards ────────────────────────────────────────────────────────────── */
.mk-card__chains { padding: 2px 7px; border-radius: 999px; background: rgba(98, 126, 234, .18); color: #AFC0FF; font: 700 11px/1.4 var(--a-body); letter-spacing: .04em; }
.mk-card__held { font-style: normal; font-size: 12px; color: var(--a-dim, #9A95A6); }

/* ── buy sheet: pay on which chain ────────────────────────────────────── */
/* The buy box grew (chain picker, gas note, bridge hint): it scrolls with the sheet now. */
.mk-sheet .mk-buybox { position: static; }
.ep-route[hidden] { display: none; }
.mk-chains { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mk-chains[hidden] { display: none; }
.mk-chains legend { padding: 0; margin-bottom: 6px; font: 600 12px/1 var(--a-body); letter-spacing: .14em; text-transform: uppercase; color: var(--a-dim, #9A95A6); }
.mk-chains label { position: relative; display: block; cursor: pointer; }
.mk-chains input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mk-chains span { display: grid; gap: 2px; min-height: 56px; padding: 10px 12px; border-radius: 12px; background: var(--mk-card, rgba(255, 255, 255, .04)); box-shadow: var(--a-rim); }
.mk-chains b { font: 700 15px/1.2 var(--a-body); color: var(--a-cream, #F4EEDC); }
.mk-chains small { font-size: 12px; line-height: 1.3; color: var(--a-dim, #9A95A6); }
.mk-chains input:checked + span { box-shadow: inset 0 0 0 2px var(--a-gold, #E7B64A); background: rgba(231, 182, 74, .08); }
.mk-chains input:focus-visible + span { outline: 2px solid var(--a-gold-hi, #FED654); outline-offset: 2px; }
.mk-chains input:disabled + span { opacity: .45; cursor: not-allowed; }
.mk-gas { margin: 0; font-size: 14px; line-height: 1.45; color: var(--a-soft, #C9C3B3); }
.mk-gas b { color: var(--a-cream, #F4EEDC); }

/* the bridge hint (route boxes come from ethpay.css) */
.mk-bridge { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--mk-card, rgba(255, 255, 255, .04)); box-shadow: var(--a-rim); }
.mk-bridge[hidden] { display: none; }
.mk-bridge__h { margin: 0; font: 700 14px var(--a-body); color: var(--a-cream, #F4EEDC); }
.mk-bridge .ep-route b { font-size: 22px; }
.mk-bridge .btn { justify-self: start; }
.mk-noq { font-size: 14px; color: var(--a-soft); }
.mk-noq summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }

/* ── sell ─────────────────────────────────────────────────────────────── */
.mk-sell { display: grid; gap: 14px; max-width: 720px; }
.mk-sell__intro { display: grid; gap: 6px; }
.mk-sell .mk-buybtn[hidden] { display: none; }
.mk-mine { display: grid; gap: 10px; }
.mk-mine[hidden] { display: none; }
.mk-mine__h { margin: 8px 0 0; font: 600 12px/1 var(--a-body); letter-spacing: .14em; text-transform: uppercase; color: var(--a-dim, #9A95A6); }
.mk-mine__list { display: grid; gap: 8px; }
.mk-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: var(--mk-card, rgba(255, 255, 255, .04)); box-shadow: var(--a-rim); }
.mk-row img { width: 56px; height: 56px; object-fit: contain; }
.mk-row__t { display: grid; gap: 2px; min-width: 0; }
.mk-row__t b { font: 400 18px/1.1 var(--a-display); color: var(--a-cream, #F4EEDC); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row__t span { font-size: 13px; color: var(--a-soft); }
.mk-row__tag { padding: 4px 9px; border-radius: 999px; background: rgba(231, 182, 74, .14); color: var(--a-gold-hi, #FED654); font: 700 11px/1.3 var(--a-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mk-row__acts { display: grid; gap: 4px; justify-items: end; }
@media (max-width: 420px) {
  .mk-row { grid-template-columns: 48px 1fr; }
  .mk-row img { width: 48px; height: 48px; }
  .mk-row > .btn, .mk-row__acts, .mk-row__tag { grid-column: 1 / -1; justify-self: stretch; }
  .mk-row__acts { grid-template-columns: 1fr auto; align-items: center; }
}

/* the list sheet */
.mk-sheet--list .mk-list { padding: 8px 16px 24px; }
@media (min-width: 820px) { .mk-sheet--list { max-width: 520px; } .mk-sheet--list .mk-list { padding: 26px; } }
.mk-list__head { display: flex; align-items: center; gap: 12px; padding-right: 48px; }
.mk-list__head img { width: 72px; height: 72px; object-fit: contain; }
.mk-list__head .mk-sheet__name { font-size: 28px; }
.mk-field { display: grid; gap: 6px; }
.mk-field > span { font: 600 12px/1 var(--a-body); letter-spacing: .14em; text-transform: uppercase; color: var(--a-dim, #9A95A6); }
.mk-field input { height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--a-smoke-hi, #1A1D29); color: var(--a-text); font: 600 18px var(--a-body); box-shadow: var(--a-rim); }
.mk-field input:focus-visible { outline: 2px solid var(--a-gold-hi, #FED654); outline-offset: 2px; }
.mk-field .mk-sel { width: 100%; }
.mk-check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--a-soft); cursor: pointer; }
.mk-check[hidden] { display: none; }
.mk-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--a-gold, #E7B64A); }