/* masterplan feature styles (loaded after app.css). */

/* Real developer site plan: linework multiplies onto the ash stage, units are tinted cells. */
.mp-real img { mix-blend-mode: multiply; pointer-events: none; }
.mp-real .mp-unit polygon { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; fill-opacity: .42; transition: fill var(--t), fill-opacity var(--t), stroke var(--t); }
.mp-real .mp-unit.available polygon { fill: var(--available); }
.mp-real .mp-unit.reserved polygon { fill: var(--reserved); }
.mp-real .mp-unit.sold polygon { fill: var(--fog); fill-opacity: .2; }
.mp-real .mp-unit:hover polygon, .mp-real .mp-unit.hot polygon { fill: var(--accent); fill-opacity: .62; }
.mp-real .mp-unit.selected polygon { fill: var(--carbon); fill-opacity: .5; }
.mp-real .mp-unit.shortlisted polygon { stroke: var(--accent); stroke-width: 3; }
.mp-real .mp-unit.dim { opacity: .12; }

/* Level switch sits over the plan, top left. */
.mp-levels { position: absolute; left: 12px; top: 12px; z-index: 2; max-width: calc(100% - 76px); }
.mp-levels[hidden] { display: none; }
.mp-levels button { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.mp-levels button.nudge { color: var(--accent); }
.mp-lvl-n { font-variant-numeric: tabular-nums; color: var(--fog); font-size: 12px; }
.mp-lvl-n:empty { display: none; }
.mp-lvl-short { display: none; }
.mp-levels:not([hidden]) ~ .mp-compass { top: 60px; }

@media (max-width: 640px) {
  .mp-lvl-full { display: none; }
  .mp-lvl-short { display: inline; }
  .mp-levels button { padding: 0 10px; gap: 6px; }
  .mp-levels:not([hidden]) ~ .mp-compass { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-real .mp-unit polygon { transition: none; }
}
.mp-star { color: var(--accent); }