/* kplex-massing — styles for the viewer container, labels, compass, caption.
   Include once on any page that mounts the viewer. */
.km-root {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #141210;
  touch-action: none;          /* one-finger drag rotates, two fingers zoom */
  user-select: none;
  -webkit-user-select: none;
}
.km-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.km-canvas:active { cursor: grabbing; }
.km-labels { position: absolute; inset: 0; pointer-events: none; }

.km-label {
  font: 500 12px/1.2 Inter, system-ui, sans-serif;
  color: #f5f1e8;
  background: rgba(20, 18, 16, 0.72);
  border: 1px solid rgba(201, 169, 97, 0.45);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  backdrop-filter: blur(2px);
}
.km-label--main  { font-weight: 600; border-color: #c9a961; }
.km-label--dim   { color: #c9a961; background: rgba(20, 18, 16, 0.55); border-color: transparent; font-size: 11px; }
.km-label--muted { color: #9a938a; background: transparent; border-color: transparent; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
.km-label--ghost { color: #c9a961; opacity: 0.85; background: transparent; border: 1px dashed rgba(201, 169, 97, 0.5); }

.km-compass {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(201, 169, 97, 0.5);
  background: rgba(20, 18, 16, 0.6);
  display: grid; place-items: center;
  pointer-events: none;
  will-change: transform;
}
.km-compass::before {
  content: ''; position: absolute; top: 4px; left: 50%;
  width: 0; height: 0; margin-left: -4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 8px solid #c9a961;
}
.km-compass span { font: 600 11px Inter, sans-serif; color: #f5f1e8; margin-top: 8px; }

/* Guardrail caption — every massing view carries it. */
.km-root::after {
  content: 'Illustrative massing — not an architectural design. Subject to zoning review.';
  position: absolute; left: 12px; right: 60px; bottom: 10px;
  font: 400 11px/1.3 Inter, system-ui, sans-serif;
  color: #9a938a; pointer-events: none;
}

/* Styled view: soft vignette + a caption pill that stays legible on the light scene. */
.km-root::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 58%, rgba(20,18,16,0.22) 100%);
}
.km-root--styled::after {
  color: #f5f1e8; background: rgba(20, 18, 16, 0.55); padding: 4px 9px; border-radius: 6px;
  right: auto; backdrop-filter: blur(3px);
}
.km-root--styled .km-compass { background: rgba(20, 18, 16, 0.55); }

/* Map view (kplex-map.js): MapLibre canvas fills the container; pins for the portfolio. */
.km-root--map { background: #0c0e11; }
.km-root--map .maplibregl-canvas { outline: none; }
.km-root--map::after { color: #f5f1e8; background: rgba(20, 18, 16, 0.55); padding: 4px 9px; border-radius: 6px; right: auto; backdrop-filter: blur(3px); z-index: 2; }
.km-root--map .maplibregl-ctrl-attrib { font: 10px/1.3 Inter, system-ui, sans-serif; background: rgba(20, 18, 16, 0.55); color: #cfc7b5; }
.km-root--map .maplibregl-ctrl-attrib a { color: #c9a961; }
.km-pin { display: flex; align-items: center; gap: 6px; pointer-events: none; transition: opacity .3s; will-change: opacity; }
.km-pin i { width: 9px; height: 9px; border-radius: 50%; background: #c9a961; box-shadow: 0 0 0 3px rgba(201,169,97,0.28), 0 1px 3px rgba(0,0,0,0.6); }
.km-pin span { font: 500 11px/1 Inter, system-ui, sans-serif; color: #f5f1e8; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6); letter-spacing: 0.02em; white-space: nowrap; }