/* v3.1 Markets: News & Markets dashboard grid, crypto table (container-query responsive), coin page, stocks page. Reuses markets.css tokens (.mk-up, .mk-down, .mk-badge ...).
   No horizontal scrolling anywhere: wide tables hide columns by container width, then become stacked cards. Tap targets are >= 44px. */
.mk-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.mk-tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:inherit;font-weight:600}
.mk-tabs a:hover{border-color:var(--brand)}
.mk-tabs a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.mk-tabs a:focus-visible,.mk-rbtn:focus-visible,.mk-sort:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- dashboard grid: 12 columns on desktop, 2 on tablets, 1 on phones */
.mk-dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:start;min-width:0}
.mk-dash>*{min-width:0}
.mk-panel{grid-column:span 12;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;container-type:inline-size}
.mk-panel>h2.sp-h,.mk-ph h2.sp-h{margin:0 0 8px}
.mk-ph{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px}
.mk-ph .small-link{margin-inline-start:auto}
.mk-panel .mk-tablewrap{border:0;background:none;border-radius:0}
.mk-panel .mk-sec{margin:0}
@media(min-width:760px){.mk-w4,.mk-w6{grid-column:span 6}.mk-w8,.mk-w12{grid-column:span 12}}
@media(min-width:1100px){.mk-w4{grid-column:span 4}.mk-w6{grid-column:span 6}.mk-w8{grid-column:span 8}.mk-w12{grid-column:span 12}.mk-side{grid-column:span 4}}
.mk-side{grid-column:span 12;display:grid;gap:14px;min-width:0}
.mk-side>.mk-panel{grid-column:auto}

/* KPI strip */
.mk-kpilist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;margin:0}
.mk-kpi{background:var(--chip);border-radius:8px;padding:8px 10px;min-width:0}
.mk-kpi dt{font-size:12px;color:var(--muted);margin:0}
.mk-kpi dd{margin:2px 0 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mk-kpi dd b{font-size:17px}

/* crypto table */
.mk-ctable-wrap{container:mkc/inline-size;overflow:hidden;min-width:0}
.mk-ctable{width:100%;border-collapse:collapse;font-size:14px}
.mk-ctable th,.mk-ctable td{padding:4px 8px;border-bottom:1px solid var(--line);vertical-align:middle;font-weight:400;text-align:start}
.mk-ctable thead th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.mk-ctable tbody tr:last-child td,.mk-ctable tbody tr:last-child th{border-bottom:0}
.mk-ctable .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-ctable .c-rank{width:34px;color:var(--muted);font-variant-numeric:tabular-nums}
.mk-ctable .c-name a{display:flex;align-items:center;gap:8px;min-height:44px;color:inherit;min-width:0}
.mk-sym{font-weight:700}
.mk-cn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-ctable .c-name .mk-cn{max-width:16ch}
.mk-ctable .c-spark{width:120px}
.mk-ctable .mk-spark{width:100%;max-width:110px;height:auto}
.mk-sort{min-width:44px;display:inline-flex;align-items:center;justify-content:inherit;min-height:44px;color:inherit;text-decoration:none;gap:2px}
.mk-ctable th.num .mk-sort{justify-content:flex-end;width:100%}
.mk-ctable tbody tr:hover{background:var(--chip)}
@container mkc (max-width:900px){.mk-ctable .c-vol{display:none}}
@container mkc (max-width:780px){.mk-ctable .c-p1{display:none}}
@container mkc (max-width:700px){.mk-ctable .c-mcap{display:none}}
@container mkc (max-width:560px){
  .mk-ctable,.mk-ctable tbody{display:block}
  .mk-ctable thead{display:none}
  .mk-sortbar{display:flex}
  .mk-ctable tbody{display:grid;gap:8px}
  .mk-ctable tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:"rk nm nm nm pr pr" "p1 p1 p24 p24 p7 p7" "mc mc vo vo sp sp";gap:2px 6px;align-items:center;
    background:var(--bg,transparent);border:1px solid var(--line);border-radius:var(--radius);padding:2px 10px 8px}
  .mk-ctable th,.mk-ctable td{display:block;border:0;padding:0;min-width:0}
  .mk-ctable .c-p1,.mk-ctable .c-vol,.mk-ctable .c-mcap{display:block}
  .mk-ctable .c-rank{grid-area:rk;font-size:13px}
  .mk-ctable .c-name{grid-area:nm}
  .mk-ctable .c-name .mk-cn{max-width:none}
  .mk-ctable .c-price{grid-area:pr;font-size:17px;font-weight:700;text-align:end}
  .mk-ctable .c-p1{grid-area:p1}.mk-ctable .c-p24{grid-area:p24}.mk-ctable .c-p7{grid-area:p7}
  .mk-ctable .c-mcap{grid-area:mc}.mk-ctable .c-vol{grid-area:vo}.mk-ctable .c-spark{grid-area:sp;width:auto}
  .mk-ctable td.num{text-align:start;font-size:14px}
  .mk-ctable td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
  .mk-ctable .c-spark .mk-spark{width:100%;max-width:96px;margin-inline-start:auto}
}
.mk-ctable.compact .c-spark{width:100px}
.mk-search{display:flex;gap:8px;margin:0 0 10px}
.mk-search input[type=search]{flex:1 1 auto;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg,var(--panel));color:inherit;font:inherit}
.mk-search .btn{min-height:44px;padding:0 18px;display:inline-flex;align-items:center}
.mk-pager{margin:10px 0 0}.mk-pager .btn{min-height:44px;display:inline-flex;align-items:center;padding:0 18px}

/* movers / trending lists */
.mk-mv2{list-style:none;padding:0;margin:0}
.mk-mv2 li{padding:0}
.mk-mv2 li a{display:flex;align-items:center;gap:8px;min-height:44px;color:inherit;border-bottom:1px solid var(--line);min-width:0}
.mk-mv2 li:last-child a{border-bottom:0}
.mk-mv2 .mk-cn{flex:1 1 auto}
.mk-mvp{flex:none;font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px}
.mk-mv2 b{flex:none}
.mk-dash .mk-two{gap:6px 14px}
.mk-dash .mk-embed-ph .btn{width:auto}

/* coin page */
.mk-coin .mk-panel{margin:0 0 14px}
.mk-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:6px 0 0}
.mk-chip{background:var(--chip);border-radius:999px;padding:6px 12px;min-height:34px;display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.mk-range{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.mk-rbtn{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;color:inherit;font-weight:600;background:var(--panel)}
.mk-rbtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.mk-chartfig{margin:0}
.mk-chart{display:block;width:100%;height:auto;aspect-ratio:720/280;max-height:340px;color:#0a7d3c;touch-action:pan-y}
.mk-chart.down{color:#b3261e}
[data-theme=dark] .mk-chart{color:#5fd68a}[data-theme=dark] .mk-chart.down{color:#ff8a7d}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .mk-chart{color:#5fd68a}:root:not([data-theme=light]) .mk-chart.down{color:#ff8a7d}}
.mk-line{stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mk-area{fill:currentColor;opacity:.12}
.mk-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-cross{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
.mk-cross.on{opacity:.7}
.mk-readout{min-height:1.4em;font-variant-numeric:tabular-nums}
.mk-stats{margin:0}
.mk-stats>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.mk-stats>div:last-child{border-bottom:0}
.mk-stats dt{color:var(--muted);font-size:13px}
.mk-stats dd{margin:0;text-align:end;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mk-xtable{width:100%;border-collapse:collapse;font-size:14px}
.mk-xtable th,.mk-xtable td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:start;font-weight:400}
.mk-xtable thead th{font-size:12px;color:var(--muted);text-transform:uppercase;font-weight:600}
.mk-xtable .num{text-align:end;font-variant-numeric:tabular-nums}
@container (max-width:480px){
  .mk-xtable,.mk-xtable tbody{display:block}
  .mk-xtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mk-xtable tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 8px;padding:6px 0;border-bottom:1px solid var(--line)}
  .mk-xtable th,.mk-xtable td{display:block;border:0;padding:0}
  .mk-xtable th{font-weight:700}.mk-xtable td.num{text-align:start}
  .mk-xtable td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:var(--muted);text-transform:uppercase}
}
.mk-page.mk-coin .primary,.mk-page.mk-coin .side{min-width:0}
@media(max-width:640px){.mk-price{font-size:30px}.mk-dash{gap:10px}.mk-panel{padding:10px 12px}}
@media print{.mk-range,.mk-search{display:none}}

/* sorting on phones: the header row is gone in card mode, so a plain row of 44px links takes over (inside the container, shown only in card mode) */
.mk-sortbar{display:none;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none}
.mk-sortbar a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;color:inherit;text-decoration:none;background:var(--panel)}
.mk-sortbar a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.mk-dash .mk-table .mk-c-name a{min-width:44px}