/* styles/map-v2.css: Mismatch Map (/map), Phase 4, Oct 2026.
   Loads after the p4-page stack + market-radar.css (plot card, dots, tooltip,
   legend and controls are the radar's mr- classes). Page parts here are mp-.
   Dot colour is the price basis (green = sold, hollow orange = asking), never
   the zone; zones are shown by position and the grey band. */

.mp-controls { justify-content: space-between; }
.mp-controls .ui-segmented button { font-family: var(--font-sans); font-size: var(--text-sm); height: 32px; padding: 0 var(--space-3); }
.rk2 .hm2-table th, .rk2 .hm2-table th button { font-family: var(--font-sans); }
.mp-find { min-width: 220px; }
.mp-plot { aspect-ratio: 1000 / 620; min-height: 0; }
.mp-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-plot .mr-loading { height: 100%; }
.mp-band { fill: var(--foreground); fill-opacity: .045; }
.mp-zone { font: 500 12px var(--font-sans); fill: var(--muted-fg); paint-order: stroke; stroke: var(--background); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.mp-zone--strong { fill: var(--foreground); font-weight: 600; }
.mp-axis-t { font: 500 12px var(--font-sans); fill: var(--muted-fg); }
.mp-diag { fill: none; stroke: var(--foreground); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: .55; }
.mr-dot { cursor: pointer; }
.mr-dot.is-small circle:not(.mr-hit) { fill-opacity: .45; }
.mr-key--band { width: 18px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--foreground) 9%, transparent); }
.mr-tip a { pointer-events: auto; }
.mp-tip__parts { display: grid; gap: 4px; margin: 8px 0 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.mp-part { display: grid; grid-template-columns: 74px 1fr 24px; align-items: center; gap: 8px; color: var(--muted-fg); }
.mp-part i { position: relative; display: block; height: 6px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.mp-part i b { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--foreground); opacity: .7; }
.mp-part em { font: 600 var(--text-xs) var(--font-mono); font-style: normal; color: var(--foreground); text-align: right; }
.mp-tip__note { margin-top: 4px; color: var(--muted-fg); }
.mp-tip__go { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--primary-ink); }

/* Gap bar in lists and table: where the stats sit vs where the price sits, 0-100 */
.mp-gapbar { position: relative; display: block; flex: none; width: 120px; height: 14px; }
.mp-gapbar::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--muted); }
.mp-gapbar s { position: absolute; top: 6px; height: 2px; background: var(--foreground); opacity: .35; text-decoration: none; }
.mp-gapbar u, .mp-gapbar ins { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; text-decoration: none; }
.mp-gapbar u { background: var(--foreground); }
.mp-gapbar ins.is-sold { background: var(--chart-sold); }
.mp-gapbar ins.is-ask { background: var(--background); box-shadow: inset 0 0 0 2px var(--chart-asking); }
.mp-gap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mp-gap__row { display: inline-flex; align-items: center; gap: var(--space-3); }
.mp-gap b { min-width: 34px; font: 600 var(--text-sm) var(--font-mono); text-align: right; }
.mp-gap small .mp-flag:first-child { margin-left: 0; }
.mp-gap small { font-size: var(--text-xs); color: var(--muted-fg); white-space: nowrap; }
.mp-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--muted-fg); }
.mp-key span { display: inline-flex; align-items: center; gap: 6px; }
.mp-key u { width: 10px; height: 10px; border-radius: 50%; background: var(--foreground); }
.mp-key ins { width: 10px; height: 10px; border-radius: 50%; background: var(--chart-sold); }
.mp-flag { display: inline-block; margin-left: 6px; padding: 0 5px; font: 500 10px/16px var(--font-sans); color: var(--muted-fg); background: var(--muted); border-radius: var(--radius-sm); vertical-align: 1px; white-space: nowrap; }
.mp-table .mp-zonecell { font-size: var(--text-xs); color: var(--muted-fg); white-space: nowrap; }
.mp-table th.num, .mp-table td.num { text-align: right; }
.mp-tablebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.mp-tablebar .ui-segmented button { font-family: var(--font-sans); font-size: var(--text-sm); height: 32px; }
.mp-count { font-size: var(--text-sm); color: var(--muted-fg); }
.mp-count b { font-family: var(--font-mono); color: var(--foreground); }
.mp-table tr[hidden] { display: none; }
.mp-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.mp-notes .p4-note { margin-top: 0; }
.mp-notes .p4-note b { display: block; margin-bottom: 2px; color: var(--foreground); font-weight: 600; }

/* KPI: neutral mini bars for the gap leaders */
.mp-kbar i { background: color-mix(in srgb, var(--foreground) 14%, transparent) !important; }
.mp-hist { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin-top: 4px; }
.mp-hist i { flex: 1; min-width: 0; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--foreground) 14%, transparent); }
.mp-hist i.is-in { background: color-mix(in srgb, var(--foreground) 45%, transparent); }
.mp-hist__k em { font-style: normal; }
.mp-hist__k { display: flex; justify-content: space-between; font: 500 10px/14px var(--font-mono); color: var(--muted-fg); }

@media (max-width: 899px) {
  .mp-plot { aspect-ratio: 1 / 1; }
  .mp-notes { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .mp-find { flex: 1 1 100%; min-width: 0; order: -1; }
  .mp-gapbar { width: 64px; }
  .mp-gap__row { gap: var(--space-2); }
  .mp-tablebar .ui-segmented { display: flex; width: 100%; }
  .mp-tablebar .ui-segmented button { flex: 1; padding: 0 4px; font-size: var(--text-xs); white-space: nowrap; }
  .hm2-card .hm2-table td.num .mp-gap small { display: none; }
  .mp-table .mp-gapbar { display: none; }
  .mp-zone { font-size: 11px; }
}
@media (max-width: 767px) {
  .mr-controls.mp-controls { flex-wrap: wrap; overflow: visible; margin: 0 0 var(--space-3); padding: 0; }
}