/* Styles for the live market section and the gainers count (live-market.js, live-performance.js). */
.gainers-count { color: var(--muted); font: 11px var(--mono); letter-spacing: .04em; }

/* Two performance tiles, not five. Later in the cascade than live-performance.css, so it wins. */
.perf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }

.mk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (min-width: 760px) { .mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-value { font: 600 20px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; overflow-wrap: anywhere; }
.mk-value.up { color: var(--green); }
.mk-value.down { color: var(--red); }
.mk-sub { font: 12px var(--mono); color: var(--muted); overflow-wrap: anywhere; }

.mk-block { margin-top: 22px; }
.mk-macro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin-top: 10px; }
@media (min-width: 760px) { .mk-macro { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.mk-macro-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-macro-label { font: 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mk-macro-value { font: 600 15px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.mk-macro-chg { font: 12px var(--mono); color: var(--muted); direction: ltr; text-align: start; }
.mk-macro-chg.up { color: var(--green); }
.mk-macro-chg.down { color: var(--red); }

/* Market-data charts: Fear & Greed history and top 24h gainers (live-market.js, live-performance.js). */
.mk-charts { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 26px; }
@media (min-width: 760px) { .mk-charts { grid-template-columns: 1fr 1fr; } }
.mk-chart { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mk-svg { display: block; width: 100%; height: 140px; }
.mk-gridline { stroke: var(--line-2); stroke-dasharray: 3 5; }
.mk-line { fill: none; stroke: var(--green); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mk-axis { display: flex; justify-content: space-between; font: 12px var(--mono); color: var(--muted); direction: ltr; }
.bar-row { display: grid; grid-template-columns: 56px 1fr 72px; align-items: center; gap: 10px; padding: 4px 0; }
.bar-sym { font: 600 13px var(--mono); color: var(--text); }
.bar-track { position: relative; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--green); border-radius: 5px; }
.bar-val { font: 12px var(--mono); color: var(--green); direction: ltr; text-align: end; font-variant-numeric: tabular-nums; }

/* Animated, data-driven charts (live-charts.js). Each animation runs once when its card scrolls into view. */
.bar-fill { transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.bar-fill.liq-fill { background: linear-gradient(90deg, rgba(47, 208, 138, .35), var(--green-2)); }
.mk-line { transition: stroke-dashoffset 1.6s ease-out; }

.chart-ring { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.ring-box { position: relative; width: 132px; height: 132px; }
.ring-svg { display: block; width: 100%; height: 100%; }
.ring-track { fill: none; stroke: var(--line-2); stroke-width: 10; }
.ring-arc { fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1); }
.ring-arc.tone-down { stroke: var(--red); }
.ring-value { position: absolute; inset: 0; display: grid; place-items: center; font: 600 20px var(--mono); color: var(--text); direction: ltr; font-variant-numeric: tabular-nums; }
.chart-label { font: 12px var(--mono); color: var(--muted); text-align: center; }

.fng-gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; }
.gauge-box { width: 100%; max-width: 280px; }
.gauge-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge-band { stroke-width: 14; stroke-linecap: butt; }
.band-ext-fear { stroke: #F6465D; }
.band-fear { stroke: #FF7A1A; }
.band-neutral { stroke: #E9C46A; }
.band-greed { stroke: #2FD08A; }
.band-ext-greed { stroke: #3DDC2F; }
.gauge-needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 100px 100px; transform: rotate(0deg); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.gauge-hub { fill: var(--text); }
.fng-now { font: 600 14px var(--mono); color: var(--text); direction: ltr; }

.mk-donut { position: relative; width: 190px; max-width: 100%; margin: 0 auto; }
.donut-box { position: relative; width: 100%; }
.donut-svg { display: block; width: 100%; height: auto; }
.donut-seg { fill: none; stroke-width: 14; transition: stroke-dasharray 1.4s cubic-bezier(.2, .7, .2, 1); }
.donut-centre { position: absolute; inset: 0; display: grid; place-items: center; font: 600 18px var(--mono); color: var(--text); direction: ltr; pointer-events: none; }
.donut-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--mono); color: var(--muted); direction: ltr; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.seg-0 { stroke: #E9C46A; } .legend-dot.seg-0 { background: #E9C46A; }
.seg-1 { stroke: #3DDC2F; } .legend-dot.seg-1 { background: #3DDC2F; }
.seg-2 { stroke: #2FD08A; } .legend-dot.seg-2 { background: #2FD08A; }
.seg-3 { stroke: #FF7A1A; } .legend-dot.seg-3 { background: #FF7A1A; }
.seg-4 { stroke: #8FA59A; } .legend-dot.seg-4 { background: #8FA59A; }
.seg-5 { stroke: #F6465D; } .legend-dot.seg-5 { background: #F6465D; }

.mk-liq { display: flex; flex-direction: column; gap: 4px; }
.mk-foot-note { margin: 8px 0 0; font: 12px var(--mono); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .ring-arc, .bar-fill, .gauge-needle, .donut-seg, .mk-line { transition: none !important; }
}