/* market-view.css -- extracted verbatim from the page's inline <style> block
   (v3.0.0 frontend extraction). Palette tokens (__CHART_SURFACE__ etc.)
   became var(--...) refs; nothing else changed. */

/* Market View tab: whole-universe breadth as of the cutoff date (see
   CandlestickChartViewer.market_breadth()) -- new-52-week-high/low hit
   counts and RS-ranking improving/degrading counts over trailing
   10/20/50/100 trading days. Ticker-independent (only the cutoff drives
   it), so it never shows a "no ticker" state -- see loadMarketView(). */
#marketViewPane { padding: 18px 22px 40px; box-sizing: border-box; overflow-y: auto; }
.mv-loading, .mv-empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: var(--fs-base); }
.mv-header { margin-bottom: 18px; }
.mv-title { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.mv-subtitle { font-size: var(--fs-sm); color: var(--muted); margin-left: 10px; }

.mv-charts { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.mv-panel {
  flex: 1 1 380px; min-width: 320px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--grid); border-radius: 6px;
  padding: 16px 18px 18px;
}
.mv-panel-title { font-size: var(--fs-base); font-weight: 700; color: var(--text); margin-bottom: 8px; }
.mv-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.mv-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--muted); }
.mv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mv-group { margin-bottom: 14px; }
.mv-group:last-child { margin-bottom: 0; }
.mv-group-label { font-size: var(--fs-micro); font-weight: 700; color: var(--text); margin-bottom: 6px; }

/* One bar per period: a left (green) segment and a right (red) segment
   sized as their own %-of-universe, with a neutral var(--grid) middle
   segment filling the rest -- so the bar always reads as 100% of the
   universe, unlike splitBarRow (up/down-volume box) which only splits
   its own pair's share of each other. */
.mv-tri-row { display: flex; align-items: center; gap: 8px; }
.mv-tri-value { flex: 0 0 auto; min-width: 84px; display: flex; align-items: baseline; gap: 4px; }
.mv-tri-value.mv-tri-left { justify-content: flex-end; }
.mv-tri-value.mv-tri-right { justify-content: flex-start; }
.mv-tri-count { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.mv-tri-pct { font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
.mv-tri-track {
  position: relative; display: flex; flex: 1 1 auto; min-width: 60px; height: 14px;
  border-radius: 4px; background: var(--grid); overflow: hidden;
}
.mv-tri-seg { height: 100%; }