/* Vibe Trader · Markets (#/markets): a dense screener table. Linked after pro-pages.css and overrides its older markets rules.
 * markets.js fit() measures the table: optional columns drop out (.d-* on the wrap) only while it is wider than the wrap;
 * .xs marks the last resort (sideways scroll, token column pinned). On desktop the wrap is a viewport-high scroll box
 * (pro-pages.css) with the header row pinned inside it; on phones it clips so the header pins to the page instead. */

.page[data-route="markets"] .mk-tools { gap:10px; padding:10px; margin:18px 0 14px; }
.page[data-route="markets"] .mk-tools button { min-height:32px; font-size:12.5px; }
.page[data-route="markets"] .mk-tools .seg button { padding:0 12px; }
.page[data-route="markets"] .mk-majors.on { color:var(--text); border-color:var(--primary-line); background:var(--primary-soft); }
.page[data-route="markets"] .mk-search { width:280px; }
.page[data-route="markets"] .mk-search input { height:34px; font-size:13px; }

.page[data-route="markets"] .mk-wrap { border:1px solid var(--line); background:rgba(13, 15, 36, .6); }
.page[data-route="markets"] .mk-table { min-width:0; width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; }
.page[data-route="markets"] .mk-table th {
  position:sticky; top:0; z-index:2; padding:10px 12px; background:#0F1129; border-bottom:1px solid var(--line);
  font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--muted); text-align:right; white-space:nowrap;
}
.page[data-route="markets"] .mk-table :is(th, td):is(.c-rank, .c-tok, .c-risk) { text-align:left; }
.page[data-route="markets"] .mk-table th .th-btn { gap:4px; color:inherit; font:inherit; letter-spacing:inherit; }
.page[data-route="markets"] .mk-table th .th-ar { opacity:.35; }
.page[data-route="markets"] .mk-table th .th-btn:hover { color:var(--text); }
.page[data-route="markets"] .mk-table th.on { color:var(--text); }
.page[data-route="markets"] .mk-table th.on .th-ar { opacity:1; color:var(--primary-ink); }
.page[data-route="markets"] .mk-table td {
  padding:9px 12px; font-size:13px; line-height:1.35; white-space:nowrap; text-align:right; vertical-align:middle;
  border-bottom:1px solid rgba(35, 40, 72, .55);
}
.page[data-route="markets"] .mk-table tbody tr:last-child td { border-bottom:0; }
.page[data-route="markets"] .mk-table tbody tr.click { cursor:pointer; }
.page[data-route="markets"] .mk-table tbody tr.click:hover td { background:rgba(140, 123, 255, .06); }
.page[data-route="markets"] .mk-table tbody tr.click:focus-visible { outline:2px solid var(--primary-line); outline-offset:-2px; }
.page[data-route="markets"] .mk-table tbody tr.sel td { background:var(--primary-soft); }
.page[data-route="markets"] .mk-table tbody tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--violet); }
.page[data-route="markets"] .mk-table .c-rank { width:38px; min-width:38px; color:var(--muted); font-size:12px; }
.page[data-route="markets"] .mk-table td.c-price { font-weight:600; color:var(--text); }
.page[data-route="markets"] .mk-table .c-chg { min-width:66px; }

.page[data-route="markets"] .mk-table .c-tok { min-width:236px; }
.page[data-route="markets"] .tk { display:flex; align-items:center; gap:10px; }
.page[data-route="markets"] .tk .tk-logo { box-shadow:0 0 0 1px rgba(255, 255, 255, .07); }
.page[data-route="markets"] .tk-t { min-width:0; display:flex; flex-direction:column; gap:3px; }
.page[data-route="markets"] .tk-s { display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:400; }
.page[data-route="markets"] .tk-s b { font-weight:650; color:var(--text); }
.page[data-route="markets"] .tk-v {
  display:inline-flex; align-items:center; height:17px; padding:0 6px; border-radius:999px; border:1px solid var(--line);
  font-size:10.5px; font-weight:500; line-height:1; color:var(--muted); background:rgba(255, 255, 255, .02);
}
.page[data-route="markets"] .tk-v.stk { color:var(--primary-ink); border-color:rgba(167, 150, 255, .35); background:var(--primary-soft); }
.page[data-route="markets"] .tk-v.ok { color:var(--green); border-color:rgba(61, 220, 151, .3); background:var(--green-soft); }
.page[data-route="markets"] .tk-hot { display:inline-flex; color:var(--amber); }
.page[data-route="markets"] .tk-n { display:flex; align-items:center; gap:8px; margin:0; font-size:11.5px; line-height:16px; color:var(--muted); }
.page[data-route="markets"] .tk-name { max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.page[data-route="markets"] .tk-name:empty { display:none; }
.page[data-route="markets"] .tk-age { display:inline-flex; align-items:center; gap:0; }
.page[data-route="markets"] .tk-name:not(:empty) + .tk-age::before { content:''; width:3px; height:3px; margin-right:8px; border-radius:50%; background:currentColor; opacity:.6; }
.page[data-route="markets"] .tk-sos { display:inline-flex; gap:1px; }
.page[data-route="markets"] .tk-so {
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:18px; border-radius:5px; color:var(--muted);
  transition:color .12s ease, background-color .12s ease;
}
.page[data-route="markets"] .tk-so:hover, .page[data-route="markets"] .tk-so:focus-visible { color:var(--text); background:var(--hover); }

.page[data-route="markets"] .c-txns { min-width:96px; }
.page[data-route="markets"] .tx { display:inline-flex; flex-direction:column; align-items:flex-end; gap:5px; vertical-align:middle; }
.page[data-route="markets"] .tx-n { display:flex; align-items:baseline; gap:7px; }
.page[data-route="markets"] .tx-n b { font-weight:600; color:var(--text); }
.page[data-route="markets"] .tx-bs { font-size:11px; color:var(--muted); }
.page[data-route="markets"] .tx-bs .up { color:var(--green); }
.page[data-route="markets"] .tx-bs .down { color:var(--red); }
.page[data-route="markets"] .tx-bar { display:block; width:100%; min-width:56px; height:3px; border-radius:2px; background:rgba(255, 107, 134, .5); overflow:hidden; }
.page[data-route="markets"] .tx-bar i { display:block; height:100%; background:var(--green); }

.page[data-route="markets"] .sm-v { color:var(--green); }
.page[data-route="markets"] .sm-k { color:var(--violet); }
.page[data-route="markets"] .warn-t { color:var(--amber); }

.page[data-route="markets"] .c-risk { min-width:100px; }
.page[data-route="markets"] .rk {
  display:inline-flex; align-items:center; gap:4px; max-width:150px; height:20px; padding:0 8px; border-radius:999px;
  font-size:11px; font-weight:500; line-height:1; overflow:hidden; text-overflow:ellipsis;
}
.page[data-route="markets"] .rk.ok { color:var(--green); background:var(--green-soft); }
.page[data-route="markets"] .rk.warn { color:var(--amber); background:var(--amber-soft); }
.page[data-route="markets"] .rk.bad { color:var(--red); background:var(--red-soft); }
.page[data-route="markets"] .rk.nil { padding:0; color:var(--muted); }

.page[data-route="markets"] .prog-cell { display:inline-flex; align-items:center; gap:8px; }
.page[data-route="markets"] .prog-cell .progress { width:64px; }

.page[data-route="markets"] .skel-row td { height:52px; }
.page[data-route="markets"] .skel-row .skel.circle { width:30px; height:30px; flex:none; }

/* columns dropped by fit(), least important first */
.page[data-route="markets"] .mk-wrap.d-hold .c-hold, .page[data-route="markets"] .mk-wrap.d-smart .c-smart,
.page[data-route="markets"] .mk-wrap.d-top .c-top, .page[data-route="markets"] .mk-wrap.d-m1 .c-m1,
.page[data-route="markets"] .mk-wrap.d-txns .c-txns, .page[data-route="markets"] .mk-wrap.d-liq .c-liq,
.page[data-route="markets"] .mk-wrap.d-risk .c-risk, .page[data-route="markets"] .mk-wrap.d-rank .c-rank { display:none; }
.page[data-route="markets"] .mk-wrap.d-compact .mk-table :is(th, td) { padding-left:10px; padding-right:10px; }
.page[data-route="markets"] .mk-wrap.d-compact .tx-bs { display:none; }
.page[data-route="markets"] .mk-wrap.d-compact .tk-name { max-width:104px; }

/* the token column is pinned (pro-pages.css) only while the table scrolls sideways */
@media (min-width: 901px) {
  .page[data-route="markets"] .mk-table th.c-tok { background:#0F1129; }
  .page[data-route="markets"] .mk-wrap:not(.xs) .mk-table :is(th, td).c-tok { border-right:0; }
  .page[data-route="markets"] .mk-wrap:not(.xs) .mk-table td.c-tok { position:static; background:transparent; }
  .page[data-route="markets"] .mk-wrap:not(.xs) .mk-table tbody tr.click:hover td.c-tok { background:rgba(140, 123, 255, .06); }
  .page[data-route="markets"] .mk-wrap:not(.xs) .mk-table tbody tr.sel td.c-tok { background:var(--primary-soft); }
}

@media (max-width: 900px) {
  .page[data-route="markets"] .mk-wrap { overflow:clip; }
  .page[data-route="markets"] .mk-search { width:100%; }
  .page[data-route="markets"] .mk-table :is(.c-rank, .c-price, .c-chg, .c-txns, .c-prog, .c-vol, .c-liq, .c-mcap, .c-hold, .c-smart, .c-top, .c-risk) { display:none; }
  .page[data-route="markets"] .mk-table .c-chm { display:table-cell; }
  .page[data-route="markets"] .mk-table .c-tok { min-width:0; }
  .page[data-route="markets"] .tk-name, .page[data-route="markets"] .tk-sos { display:none; }
  .page[data-route="markets"] .tk-age::before { display:none; }
  .page[data-route="markets"] .tk-n { flex-wrap:wrap; row-gap:2px; }
  .page[data-route="markets"] .m-sub { display:inline; font-size:11px; }
}