/* ==========================================================================
   Markets hero (markets/_hero.html, markets-hero.js): one game on every
   exchange that lists it, in the Overview's own grid (markets.css .mk-mkt),
   the chart full width and drawn like a strategy's (markets.css
   .mk-perf-svg). Each exchange keeps one color: its line, its legend swatch.
   Novig's mark is black and white, so its line is ink; Kalshi's is its
   green, a step darker on light for contrast.
   ========================================================================== */
.page-markets { --mkh-novig: var(--tl-ink); --mkh-kalshi: #00a878; }
html:not(.si-light) .page-markets { --mkh-kalshi: #00ce8e; }
.page-markets [data-ex="novig"] { --mkh-c: var(--mkh-novig); }
.page-markets [data-ex="kalshi"] { --mkh-c: var(--mkh-kalshi); }
.mkh { margin: 0 0 26px; }

/* The exchanges, in the page header: logo, name, games. */
.mkh-exs { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; align-self: flex-end; }
.mkh-ex { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mkh-logo { display: block; width: 22px; height: 22px; border-radius: 6px; }
.mkh-mark { font-size: 14.5px; font-weight: 700; letter-spacing: -0.3px; color: var(--tl-ink); }
.mkh-ex-n { font: 500 11.5px var(--tl-mono); color: var(--tl-ink-50); }

/* The games strip: its head as Home's Top games (explore-front.css
   .hm-games-head), not the 49px the chart head keeps. */
.mkh > .mk-mkt-games > .tl-card-head { height: auto; padding: 12px 14px 10px 18px; }
/* Which exchanges list a game, along the tile's bottom from its left edge. */
.mkh-tile { row-gap: 10px; }
.mkh-on { grid-column: 1 / -1; display: flex; gap: 12px; padding-top: 9px; border-top: 1px solid var(--tl-line-06); }
.mkh-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--tl-ink-60); }
.mkh-badge img { display: block; width: 14px; height: 14px; border-radius: 4px; }

/* Order (Ben, 2026-10-20): the strategies on the picked game first,
   then the chart beside the Market card, then the week's games strip. */
.mk-mkt.mkh > .mkh-bar { order: 1; }
.mk-mkt.mkh > .mkh-chart, .mk-mkt.mkh > .mkh-info { order: 2; }
.mk-mkt.mkh > .mk-mkt-games { order: 3; }

/* The chart, full width. */
.mkh > .mkh-chart { grid-column: 1 / -1; }
/* No header: the chart starts at the card's top edge, and one bar under it
   carries what's charted (left) and the legend, toggle and tools (right). */
.mkh-chart .mkh-plot { margin-top: 10px; }
.mkh-foot { flex-wrap: nowrap; gap: 8px 12px; padding: 10px 14px 10px 16px; }
.mkh-foot > :not(.mkh-sub):not(.spacer) { flex: none; }
.mkh-crest { display: flex; flex: none; }
.mkh-crest .mk-crest-img, .mkh-crest .mk-crest { width: 20px; height: 20px; }
.page-markets .mkh-title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: var(--tl-ink); white-space: nowrap; }
.mkh-sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--tl-ink-50); }
.mkh-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.mkh-rule { flex: none; width: 1px; height: 18px; background: var(--tl-line-10); }
.mkh-tools { display: flex; align-items: center; gap: 8px; }
.mkh-tools .tl-seg button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 10px; }
.mkh-tools .tl-seg .mk-crest-img, .mkh-tools .tl-seg .mk-crest { width: 18px; height: 18px; }
.mkh-tools .tl-seg button[aria-pressed="false"] .mk-crest-img { opacity: 0.55; filter: grayscale(0.6); }
.mkh-tools .tl-seg button:hover .mk-crest-img { opacity: 1; filter: none; }
.mkh-lg .mk-lg-sw path { stroke: var(--mkh-c); stroke-width: 2.5; }
.mkh-lg img { display: block; width: 16px; height: 16px; border-radius: 4px; }
.mkh-lg[aria-pressed="false"] img, .mkh-lg[aria-pressed="false"] .mk-lg-sw { opacity: 0.4; }
.mkh-lg[aria-pressed="false"] .tl-move { visibility: hidden; }
/* Each exchange's line in its color (markets.css draws .ln in ink). */
.mkh-plot .mk-perf-svg .ln { stroke: var(--mkh-c); }
.mkh-plot .mk-perf-svg .end, .mkh-plot .mk-perf-svg .hov { fill: var(--mkh-c); }
.mkh-plot .mk-perf-svg .valtag rect { fill: var(--mkh-c); }
/* Volume pane under the price (markets-hero.js drawVolume). */
.mkh-plot .mk-perf-svg .vb { fill: var(--mkh-c); opacity: 0.55; }
.mkh-plot .mk-perf-svg .vl { font: 500 9.5px var(--tl-mono); letter-spacing: 0.4px; fill: var(--tl-ink-45, var(--tl-ink-50)); }
.mkh-tip-vol-ic { width: 18px; height: 18px; border-radius: 4px; background:
  linear-gradient(to top, var(--tl-ink-35) 0 45%, transparent 45%) 3px 100% / 3px 100% no-repeat,
  linear-gradient(to top, var(--tl-ink-35) 0 80%, transparent 80%) 8px 100% / 3px 100% no-repeat,
  linear-gradient(to top, var(--tl-ink-35) 0 60%, transparent 60%) 13px 100% / 3px 100% no-repeat; }
.mkh-plot .mk-perf-svg [data-ex="kalshi"].valtag text { fill: #fff; }
.mk-tip-row img { display: block; width: 18px; height: 18px; border-radius: 5px; }

@media (max-width: 1100px) { .mkh-sub { display: none; } }
@media (max-width: 720px) {
  .mkh-exs { width: 100%; }
  .mkh-foot { flex-wrap: wrap; }
  .mkh-rule { display: none; }
}

/* Smooth toggle (markets-hero.js): quiet when off, ink when on. */
.mkh-smooth[aria-pressed="false"] { color: var(--tl-ink-50); }
.mkh-smooth[aria-pressed="true"] { border-color: var(--tl-line-20); }