/* /movers-v2 Market page (Phase 4 preview). Shares the rk2 layout, hm2 table,
   pcr hero/KPI strip and dl2 cards; only the chart, legend, tiers and sleeper
   cards live here. Sleepers are the one emphasised group (green). */
.mk { --mk-sleeper: var(--chart-sold, #16a34a); --mk-dot: #b9b9bf; }

/* KPI: median move by rank tier, tiny diverging bars */
.mk-tiers { display: grid; gap: 5px; margin-top: 6px; }
.mk-tier { display: grid; grid-template-columns: 54px 1fr 44px; align-items: center; gap: 8px; font-size: 11px; }
.mk-tier__l { color: var(--muted-fg); white-space: nowrap; }
.mk-tier__bar { position: relative; height: 8px; background: var(--surface); border-radius: 99px; }
.mk-tier__bar::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border-strong, #ccc); }
.mk-tier__bar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.mk-tier__bar i.is-up { background: var(--chart-sold, #16a34a); }
.mk-tier__bar i.is-down { background: #dc2626; }
.mk-tier b { font: 600 11px var(--font-mono); text-align: right; }

/* Chart */
.mk-chart { position: relative; margin-top: var(--space-4); padding: var(--space-4); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mk-chart__empty { display: grid; place-items: center; min-height: 360px; color: var(--muted-fg); font-size: var(--text-sm); }
.mk-svg { display: block; width: 100%; height: auto; }
.mk-grid { stroke: var(--border); stroke-width: 1; }
.mk-grid.is-zero { stroke: var(--border-strong, #c9c9ce); stroke-width: 1.5; }
.mk-ax { font: 500 11px var(--font-mono); fill: var(--muted-fg); }
.mk-ax--t { font-family: var(--font-sans); font-size: 12px; }
.mk-corner { font: 600 11px var(--font-mono); letter-spacing: .08em; fill: var(--subtle-fg, #8a8a90); }
.mk-q-sleeper { fill: color-mix(in srgb, var(--mk-sleeper) 7%, transparent); }
.mk-dot circle { fill: var(--mk-dot); fill-opacity: .75; stroke: #fff; stroke-width: 1.5; transition: r .15s; }
.mk-dot.is-sleeper circle { fill: var(--mk-sleeper); fill-opacity: .9; }
.mk-dot:hover circle { stroke: var(--foreground); stroke-width: 2; }
.mk-lbl { font: 600 12px var(--font-sans); fill: var(--foreground); paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }
.mk-tip { position: absolute; z-index: 5; width: 220px; padding: 10px 12px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 12px; pointer-events: none; }
.mk-tip > b { display: block; font-size: 13px; }
.mk-tip > span { display: block; margin-bottom: 6px; color: var(--muted-fg); }
.mk-tip div { display: flex; gap: 6px; font-family: var(--font-mono); }
.mk-tip em { width: 48px; font-style: normal; color: var(--muted-fg); font-family: var(--font-sans); }
.mk-tip div b { margin-left: auto; }
.mk-tip__q { display: inline-block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted-fg); }
.mk-tip__q.is-sleeper { color: var(--sold); }

.mk-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.mk-key { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-3); font-size: var(--text-sm); color: var(--foreground); background: var(--background); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.mk-key:hover { border-color: var(--border-strong); }
.mk-key i { width: 10px; height: 10px; border-radius: 50%; background: var(--mk-dot); }
.mk-key.is-sleeper i { background: var(--mk-sleeper); }
.mk-key b { font: 600 12px var(--font-mono); color: var(--muted-fg); }
.mk-key-note { margin-left: auto; font-size: var(--text-xs); color: var(--muted-fg); }
.mk-guard { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--muted-fg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* Sleepers rail */
.mk-sleepers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.mk-sleeper { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mk-sleeper .hm2-player__t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sleeper__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mk-sleeper__stats div { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); background: var(--surface); border-radius: var(--radius); }
.mk-sleeper__stats em { font-style: normal; font-size: 11px; color: var(--muted-fg); }
.mk-sleeper__stats b { font: 600 var(--text-sm) var(--font-mono); }
.mk-sleeper__stats span { font: 600 11px var(--font-mono); }
.mk-sleeper__buy { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none; }
.mk-sleeper__buy:hover { border-color: var(--border-strong); background: var(--surface); }
.mk-sleeper__buy img { width: 44px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--surface); }
.mk-sleeper__buy small { display: block; font-size: 11px; color: var(--muted-fg); }
.mk-sleeper__buy b { font: 600 var(--text-base) var(--font-mono); }

/* Table */
.mk-filters { margin-top: var(--space-4); flex-wrap: wrap; }
.mk-table b.mov-up, .mk-table b.mov-down, .mk-table b.mov-flat { font-weight: 600; }
.mk-chip { display: inline-block; padding: 0 8px; font: 600 11px/20px var(--font-sans); color: var(--muted-fg); background: var(--muted); border-radius: 999px; white-space: nowrap; }
.mk-chip.is-sleeper { color: var(--sold); background: color-mix(in srgb, var(--chart-sold, #16a34a) 12%, transparent); }

@media (max-width: 1099px) { .mk-sleepers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .mk-chart { padding: var(--space-2); }
  .mk-sleepers { grid-template-columns: minmax(0, 1fr); }
  .mk-key-note { margin-left: 0; width: 100%; }
  .mk-filters .ui-segmented { overflow-x: auto; max-width: 100%; }
  .mk-table .hide-sm { display: none; }
}
.mk-sm-rank { display: none !important; }
@media (max-width: 767px) {
  .rk2-table-wrap { overflow-x: auto; }
  .mk-filters .pdp2-seg { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .mk-filters .ui-segmented { flex-wrap: wrap; }
  .mk-sm-rank { display: block !important; }
  .mk-sleepers { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; }
  .mk-sleeper { scroll-snap-align: start; }
  .mk .dl2-picks__head span, .gr .dl2-picks__head span { display: none; }
}