/* ═══════════════════════════════════════════════════════════════════════
   Market (2026-09-30): the /market page (.mk-) and the card page's Market panel (.cm-).
   Loaded after site.css, components.css and db.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── /market page ─────────────────────────────────────────────────────── */
.mk-note { font-size: .78rem; color: var(--dim); white-space: nowrap; }
.mk-kpis { margin-bottom: 20px; }
.mk-tabs { margin-bottom: 16px; }
.mk-n { font-family: var(--font-m); font-size: .72rem; color: var(--dim); margin-left: 2px; }
.tabs button.active .mk-n { color: rgba(255,255,255,.7); }
.mk-tab[hidden] { display: none; }
.mk-panel { padding: 14px 16px 16px; }
.mk-toolbar select { flex: none; }
.mk-scroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.dim { color: var(--dim); }

/* who: avatar + name, small */
.mk-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: inherit; text-decoration: none; font-weight: 600; font-size: .82rem; }
.mk-who .who-av { width: 22px; height: 22px; }
.mk-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.mk-who:hover span { color: var(--violet); }

/* the copy chip: the Discord command for the thing you are looking at */
.mk-copy { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 8px; font-family: var(--font-m); font-size: .7rem; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); cursor: pointer; transition: .15s; white-space: nowrap; max-width: 100%; }
.mk-copy span { overflow: hidden; text-overflow: ellipsis; }
.mk-copy:hover { color: var(--text); border-color: var(--violet); background: rgba(168,120,255,.1); }

/* for sale: a tile with the price under it and the seller + command beside */
.mk-grid { align-items: start; }
.mk-item { min-width: 0; }
.mk-item .tile-foot { font-size: .8rem; color: var(--muted); margin-top: 5px; }
.mk-price { font-family: var(--font-d); font-weight: 700; color: var(--gold); font-size: .92rem; letter-spacing: -.01em; }
.mk-price small { font-family: var(--font-b); font-weight: 600; font-size: .68rem; color: var(--muted); letter-spacing: 0; }
.mk-act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; min-width: 0; }
.mk-act .mk-who { max-width: 100%; }
.mk-act .mk-copy { max-width: 100%; }

/* auctions: one row each */
.mk-aucs { display: grid; gap: 8px; }
.mk-auc { display: grid; grid-template-columns: 56px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .9fr) auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); min-width: 0; transition: .15s; }
.mk-auc:hover { border-color: var(--line-2); }
.mk-auc-card img { width: 56px; aspect-ratio: 600/825; object-fit: cover; border-radius: 5px; background: var(--bg3); box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 0 0 1px var(--rc, var(--line-2)); }
.mk-auc-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.mk-auc-name { font-weight: 700; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-auc-name:hover { color: var(--violet); }
.mk-auc-body small { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-auc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.mk-auc-badges:empty { display: none; }
.mk-auc-badges .bdg, .cm-mid .bdg { backdrop-filter: none; }
.mk-auc-bid b { display: block; font-family: var(--font-d); font-weight: 700; font-size: 1.05rem; color: var(--gold); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mk-auc-bid b small, .mk-auc-ends b small { font-family: var(--font-b); font-weight: 600; font-size: .66rem; color: var(--muted); letter-spacing: 0; }
.mk-auc-bid small, .mk-auc-who small, .mk-auc-ends small { display: block; font-size: .7rem; color: var(--dim); margin-top: 2px; white-space: nowrap; }
.mk-auc-who { min-width: 0; }
.mk-auc-who > small { margin: 0 0 3px; letter-spacing: .08em; text-transform: uppercase; font-size: .62rem; }
.mk-auc-ends { text-align: right; }
.mk-left { display: block; font-family: var(--font-m); font-weight: 700; font-size: .92rem; color: var(--cyan); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-left.soon { color: var(--pink); }

/* pack price board */
.mk-packsort { margin-bottom: 10px; }
.mk-packs { min-width: 640px; }
.mk-packs td { padding: 9px 12px; }
.mk-set a { font-weight: 700; color: inherit; text-decoration: none; }
.mk-set a:hover { color: var(--violet); }
.mk-set small { display: block; font-size: .72rem; color: var(--dim); }
.mk-was { display: block; font-family: var(--font-b); font-weight: 400; font-size: .68rem; color: var(--dim); }
.mk-ch { font-family: var(--font-m); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.mk-ch.up { color: var(--green); } .mk-ch.down { color: var(--red); }
.mk-trend .spark { margin: 0; width: 110px; height: 26px; }
.mk-demand { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.mk-bar { display: inline-block; vertical-align: middle; width: 54px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; margin-right: 8px; }
.mk-bar i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--violet), var(--pink)); }
.mk-rot { white-space: nowrap; }
.mk-packs tr.deal td { background: rgba(94,255,166,.05); }

/* recent sales */
.mk-sales { min-width: 560px; }
.mk-sales td { padding: 8px 12px; }
.mk-card { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mk-card a { color: inherit; text-decoration: none; font-weight: 600; white-space: nowrap; } .mk-card a:hover { color: var(--violet); }
.mk-card small { color: var(--dim); font-size: .72rem; }
.mk-setc { color: var(--muted); font-size: .84rem; }
.mk-via { display: inline-block; padding: 1px 8px; border-radius: 7px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--muted); }
.mk-via.market { color: #d9c4ff; } .mk-via.auction { color: var(--cyan); border-color: rgba(62,224,208,.4); } .mk-via.offer { color: var(--gold); border-color: rgba(255,201,77,.4); }

/* this week's server bounties */
.mk-bounties { margin-top: 44px; }
.mk-sec-head { margin-bottom: 18px; }
.mk-sec-head .h-section { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 4px 0 0; }
.mk-sec-head p { font-size: .88rem; }
.mk-bounty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.mk-bounty { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; align-items: center; }
.mk-bounty.open { border-color: rgba(255,201,77,.35); }
.mk-bounty-art { display: block; text-decoration: none; }
.mk-bounty-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-bounty-guild { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-bounty-guild:hover { color: var(--pink); }
.mk-bounty-want { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.mk-bounty-name { font-family: var(--font-d); font-weight: 700; font-size: 1rem; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-bounty-name:hover { color: var(--violet); }
.mk-bounty-body small { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); }
.mk-bounty-state { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .8rem; min-width: 0; }

@media (max-width: 900px) {
  .mk-auc { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: 'art body bid' 'art who1 ends' 'art who2 copy'; gap: 6px 12px; }
  .mk-auc-card { grid-area: art; align-self: start; } .mk-auc-card img { width: 48px; }
  .mk-auc-body { grid-area: body; } .mk-auc-bid { grid-area: bid; text-align: right; }
  .mk-auc-hb { grid-area: who1; } .mk-auc-sl { grid-area: who2; }
  .mk-auc-ends { grid-area: ends; } .mk-auc > .mk-copy { grid-area: copy; justify-self: end; }
}
@media (max-width: 720px) {
  .page-head .mk-note { width: 100%; }
  .tiles.mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .mk-toolbar .search { max-width: none; flex-basis: 100%; }
  .mk-act { flex-wrap: wrap; }
  .mk-bounty-grid { grid-template-columns: 1fr; }
  .mk-auc { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: 'art body' 'bid bid' 'who1 who1' 'who2 who2' 'ends ends' 'copy copy'; }
  .mk-auc-who { display: flex; align-items: center; gap: 8px; } .mk-auc-who > small { margin: 0; }
  .mk-auc-bid, .mk-auc-ends { text-align: left; }
  .mk-auc > .mk-copy { justify-self: start; }
}

/* ── the card page's Market panel ─────────────────────────────────────── */
#marketPanel { margin-top: 12px; }
.cm-secs { display: grid; gap: 14px; }
.cm-sec h4 { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; }
.cm-sec h4 small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim); font-size: .72rem; }
.cm-empty { font-size: .84rem; color: var(--dim); }
.cm-wanted { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cm-avs { display: flex; }
.cm-avs a { display: block; margin-left: -8px; transition: transform .15s; } .cm-avs a:first-child { margin-left: 0; }
.cm-avs a:hover { transform: translateY(-3px); z-index: 2; position: relative; }
.cm-avs .who-av { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--bg1); }
.cm-avs a.me .who-av { box-shadow: 0 0 0 2px var(--violet); }
.cm-wanted-txt { font-size: .88rem; min-width: 0; }
.cm-wanted-txt b { font-weight: 700; }
.cm-wanted-txt small { display: block; font-size: .76rem; color: var(--dim); }
.cm-pin { margin-top: 8px; font-size: .8rem; color: var(--muted); }
.cm-pin code.cmd { cursor: pointer; }
.cm-rows { display: grid; gap: 6px; }
.cm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: .84rem; min-width: 0; }
.cm-price { font-family: var(--font-d); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 64px; }
.cm-price small { font-family: var(--font-b); font-weight: 600; font-size: .66rem; color: var(--muted); }
.cm-mid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cm-mid .mk-who { font-size: .82rem; }
.cm-mid .bdg { backdrop-filter: none; }
.cm-when { font-size: .74rem; color: var(--dim); white-space: nowrap; text-align: right; }
.cm-when b { display: block; font-family: var(--font-m); font-weight: 700; color: var(--cyan); font-size: .8rem; }
.cm-more { margin-top: 8px; font-size: .8rem; color: var(--muted); }
.cm-more a { color: var(--violet); }
.cm-stats { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.cm-stats .cm-price { font-size: 1.15rem; min-width: 0; }
.cm-stats .spark { margin: 0; width: 150px; height: 30px; flex: none; }
.cm-stats-txt { font-size: .8rem; color: var(--muted); min-width: 0; }
.cm-stats-txt b { color: var(--text); font-weight: 600; }
.cm-sales { display: grid; gap: 3px; }
.cm-sale { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); gap: 10px; font-size: .8rem; color: var(--muted); padding: 3px 10px; }
.cm-sale .cm-price { font-size: .82rem; min-width: 0; }
.cm-sale .mk-via { font-size: .6rem; padding: 0 6px; }
.cm-sale span:last-child { color: var(--dim); text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .cm-row { grid-template-columns: auto minmax(0, 1fr); } .cm-when { grid-column: 1 / -1; text-align: left; } .cm-when b { display: inline; margin-left: 6px; } }