/* ==========================================================================
   My LED Kit — roofline markup (assets/js/ui/kit-markup.js)
   Shared by the builder, the admin workspace and the quote page.
   Tokens only; no colour here is new except the markup palette itself,
   which lives in the shapes' own data.
   ========================================================================== */

/* ── shapes ─────────────────────────────────────────────────────────────── */
.km-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.km-svg .km-stroke,
.km-svg .km-halo,
.km-svg .km-hit,
.km-svg .km-rubber { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.km-svg .km-halo { stroke: rgba(0, 0, 0, 0.42); }
.km-svg .km-hit { stroke: transparent; stroke-width: 18px; pointer-events: stroke; }
.km-svg .km-rubber { stroke-dasharray: 6 6; opacity: 0.85; pointer-events: none; }
.km-svg .km-tag {
  fill: #FFFFFF;
  font-family: inherit;
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.72);
  stroke-width: 0.28em;
  stroke-linejoin: round;
  pointer-events: none;
}
.km-svg .km-text {
  font-family: inherit;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.65);
  stroke-width: 0.2em;
  stroke-linejoin: round;
}
.km-svg .km-callout { stroke: rgba(0, 0, 0, 0.45); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.km-svg .km-callout__n { font-weight: 700; font-family: inherit; pointer-events: none; }
.km-svg .km-hit-dot { fill: transparent; }
.km-svg .km-handle { fill: #FFFFFF; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; cursor: grab; }
.km-svg .is-selected .km-halo { stroke: var(--accent-ring); }
.km-svg .is-selected .km-callout { stroke: var(--accent); stroke-width: 3px; }
.km-svg .is-selected .km-text { stroke: var(--accent); }

/* ── read-only view ─────────────────────────────────────────────────────── */
.km-view__frame {
  position: relative;
  width: 100%;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-sunk);
}
.km-view__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.km-view__missing {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-3); font-size: 0.875rem;
}
.km-view .km-svg { pointer-events: none; }
/* In a thumbnail the section tags shrink below legibility; the list beside
   every small preview already names each section, so the tags step aside. */
.km-view { container-type: inline-size; }
@container (max-width: 420px) {
  .km-view .km-tag { display: none; }
}

/* ── the editor ─────────────────────────────────────────────────────────── */
.km { position: relative; width: 100%; height: 100%; }
.km__stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #101114;
  border-radius: var(--r-md);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  cursor: crosshair;
}
.km__stage:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); }
.km__stage[data-tool="select"] { cursor: default; }
.km__stage[data-tool="pan"],
.km__stage[data-space="true"] { cursor: grab; }
.km__stage[data-panning="true"] { cursor: grabbing; }
.km__stage[data-tool="text"] { cursor: text; }
.km__stage[data-tool="eraser"] { cursor: cell; }
.km__world { position: absolute; transform-origin: 0 0; will-change: transform; }
.km__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.km__stage[data-tool="select"] .km-shape,
.km__stage[data-tool="eraser"] .km-shape,
.km__stage[data-tool="text"] .km-shape--text { cursor: pointer; }
/* While drawing, shapes are not targets at all: every press lands on the
   stage itself, whose elements are never replaced by a redraw (a click whose
   target is replaced mid-click never becomes a click or a double-click).
   The text tool keeps text shapes hittable so they can be edited. */
.km__stage:not([data-tool="select"]):not([data-tool="eraser"]) .km-svg * { pointer-events: none; }
.km__stage[data-tool="text"] .km-shape--text,
.km__stage[data-tool="text"] .km-shape--text * { pointer-events: auto; }

.km__hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  max-width: calc(100% - 28px);
  padding: 0.5rem 0.9rem;
  border-radius: var(--pill);
  background: rgba(14, 15, 19, 0.78);
  color: #FFFFFF;
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.km__text-input {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: var(--r-xs);
  background: var(--surface);
  box-shadow: var(--sh-2);
}
.km__text-input input {
  width: 160px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
}
.km__text-input button {
  border: 0;
  border-radius: var(--pill);
  padding: 0 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--btn-primary);
  color: var(--btn-primary-ink);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .km__world { will-change: auto; }
}