/* =========================================================================
   Prospect Market Radar (js/market-radar.js). Shared component, Phase 4.
   Green filled = real sold price, hollow orange = asking only. Classes mr-.
   ========================================================================= */
.mr { position: relative; }
.mr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-3); }
.mr-seg { display: inline-flex; align-items: center; gap: var(--space-2); }
.mr-seg__l { font-size: var(--text-xs); color: var(--muted-fg); }
.mr-seg .ui-segmented button { height: 30px; padding: 0 10px; font-size: var(--text-xs); }

.mr-plot { position: relative; min-height: 340px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.mr-plot svg { display: block; width: 100%; height: auto; }
.mr-loading { display: grid; place-items: center; height: 340px; font-size: var(--text-sm); color: var(--muted-fg); }

.mr-grid line { stroke: var(--chart-grid); stroke-width: 1; }
.mr-axis { font: 500 11px var(--font-mono); fill: var(--muted-fg); }
.mr-axis--t { font-family: var(--font-sans); fill: var(--subtle-fg); }
.mr-median { stroke: var(--chart-axis); stroke-width: 1; stroke-dasharray: 3 4; }
.mr-corner { font: 500 10px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; fill: var(--subtle-fg); opacity: .8; }

.mr-dot circle:not(.mr-hit) { stroke: var(--background); stroke-width: 2; transition: opacity var(--duration) var(--ease); }
.mr-dot.is-sold circle:not(.mr-hit) { fill: var(--chart-sold); fill-opacity: .82; }
.mr-dot.is-ask circle:not(.mr-hit) { fill: var(--background); stroke: var(--chart-asking); stroke-width: 2; }
.mr-dot .mr-hit { fill: transparent; stroke: none; }
.mr-dot:hover circle:not(.mr-hit), .mr-dot:focus-visible circle:not(.mr-hit) { fill-opacity: 1; stroke: var(--foreground); stroke-width: 2; }
.mr-dot:focus { outline: none; }
.mr-dot.is-dim circle:not(.mr-hit) { opacity: .28; }
.mr-dot.is-focus circle:not(.mr-hit) { stroke: var(--foreground); stroke-width: 2.5; fill-opacity: 1; }
.mr-label { font: 600 11px var(--font-sans); fill: var(--foreground); paint-order: stroke; stroke: var(--background); stroke-width: 3px; pointer-events: none; }
.mr-label.is-focus { font-size: 12px; }
.mr-typical { fill: none; stroke: var(--foreground); stroke-width: 2; stroke-dasharray: 6 4; stroke-linecap: round; opacity: .7; pointer-events: none; }
.mr-typical-label { font: 600 11px var(--font-sans); fill: var(--muted-fg); paint-order: stroke; stroke: var(--background); stroke-width: 3px; pointer-events: none; }
.mr-key-line { flex: none; overflow: visible; }
.mr-key-line line { stroke: var(--foreground); stroke-width: 2; stroke-dasharray: 6 4; stroke-linecap: round; opacity: .7; }
.mr-key-typ { display: none !important; }
.mr.is-rank .mr-key-typ { display: inline-flex !important; }
.mr-trail { stroke: var(--foreground); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: .55; }
.mr-trail-dot { fill: var(--background); stroke: var(--foreground); stroke-width: 1.5; opacity: .55; }
.is-playing .mr-label { opacity: .4; }

.mr-tip { position: absolute; z-index: 3; min-width: 180px; padding: 10px 12px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); pointer-events: none; font-size: var(--text-xs); }
.mr-tip > b { display: block; font-size: var(--text-sm); color: var(--foreground); }
.mr-tip > span { display: block; color: var(--muted-fg); margin-bottom: 6px; }
.mr-tip__row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 2px 0; color: var(--muted-fg); }
.mr-tip__row b { font: 600 var(--text-xs) var(--font-mono); color: var(--foreground); }
.mr-tip .sold { color: var(--sold); } .mr-tip .ask { color: var(--asking); }
.mr-tip .up { color: var(--up); } .mr-tip .down { color: var(--down); }

.mr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-top: var(--space-3); }
.mr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--muted-fg); }
.mr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mr-key { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mr-key--sold { background: var(--chart-sold); }
.mr-key--ask { border: 2px solid var(--chart-asking); }
.mr-note { color: var(--subtle-fg); }
.mr-movers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mr-movers__l { font-size: var(--text-xs); color: var(--muted-fg); margin: 0 2px 0 6px; }
.mr-movers__l:first-child { margin-left: 0; }
.mr-mover { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 10px; line-height: 1; font-size: var(--text-xs); font-weight: 500; color: var(--foreground); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-full); cursor: pointer; }
.mr-mover:hover, .mr-mover.is-on { border-color: var(--foreground); }
.mr-mover b { font: 600 var(--text-xs)/1 var(--font-mono); }
.mr-mover .up { color: var(--up); } .mr-mover .down { color: var(--down); }
.mr-movers__btns { display: inline-flex; gap: 4px; margin-left: 6px; }
.mr-movers__btns .ui-btn { height: 28px; padding: 0 10px; font-size: var(--text-xs); }
.mr-movers__empty { font-size: var(--text-xs); color: var(--muted-fg); }

@media (max-width: 767px) {
  .mr-controls { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) var(--space-3); padding: 0 var(--gutter) 2px; scrollbar-width: none; }
  .mr-controls::-webkit-scrollbar { display: none; }
  .mr-seg { flex: none; }
  .mr-seg__l { display: none; }
  .mr-foot { flex-direction: column; align-items: flex-start; }
}