/* Canvas workspace. Colours come from tokens.css; selection is blue only. */

.lf-canvas {
  --lf-ruler: 20px;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-canvas);
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
}
.lf-canvas.lf-no-rulers { --lf-ruler: 0px; }
.lf-canvas:not(.lf-pointer-focus):focus-visible .lf-view { box-shadow: inset 0 0 0 2px var(--accent); }

.lf-view {
  position: absolute;
  left: var(--lf-ruler);
  top: var(--lf-ruler);
  right: 0;
  bottom: 0;
  overflow: hidden;
  touch-action: none;
  cursor: default;
}

/* Paper + content ---------------------------------------------------------- */

.lf-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.lf-paper {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--paper);
  box-shadow: var(--paper-shadow);
}
.lf-content { position: absolute; }
.lf-content > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lf-content svg text { user-select: none; -webkit-user-select: none; }

/* Overlay ------------------------------------------------------------------- */

.lf-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.lf-ov-grid { stroke: var(--border-strong); stroke-width: 1; stroke-opacity: 0.35; fill: none; }
.lf-ov-sel { fill: none; stroke: var(--select); stroke-width: 1; stroke-linejoin: round; }
.lf-ov-locked { stroke-dasharray: 3 2; }
.lf-ov-group { fill: none; stroke: var(--select); stroke-width: 1; stroke-opacity: 0.7; }
.lf-ov-hover { fill: none; stroke: var(--select); stroke-width: 1; stroke-opacity: 0.55; }
.lf-ov-handle { fill: #fff; stroke: var(--select); stroke-width: 1.5; }
.lf-ov-stem { stroke: var(--select); stroke-width: 1; }
.lf-ov-guide { stroke: var(--guide); stroke-width: 1; }
.lf-ov-marquee { fill: var(--select-soft); stroke: var(--select); stroke-width: 1; }

/* Measurement chip ----------------------------------------------------------- */

.lf-chip {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--text);
  color: var(--bg-panel);
  font: 500 var(--fs-status) / 1.3 var(--font-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-1);
}
.lf-chip[hidden] { display: none; }

/* Rulers --------------------------------------------------------------------- */

.lf-corner,
.lf-ruler {
  position: absolute;
  background: var(--bg-panel);
  overflow: hidden;
  pointer-events: none;
}
.lf-corner { left: 0; top: 0; width: var(--lf-ruler); height: var(--lf-ruler); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); box-sizing: border-box; }
.lf-ruler-h { left: var(--lf-ruler); top: 0; right: 0; height: var(--lf-ruler); border-bottom: 1px solid var(--border); box-sizing: border-box; }
.lf-ruler-v { left: 0; top: var(--lf-ruler); bottom: 0; width: var(--lf-ruler); border-right: 1px solid var(--border); box-sizing: border-box; }
.lf-no-rulers .lf-corner,
.lf-no-rulers .lf-ruler { display: none; }
.lf-ruler svg { display: block; }
.lf-ruler-ticks { stroke: var(--border-strong); stroke-width: 1; fill: none; }
.lf-ruler-text { fill: var(--text-3); font: 400 11px var(--font-ui); font-variant-numeric: tabular-nums; }
.lf-ruler-band { fill: var(--select-soft); }
.lf-ruler-cursor { display: none; stroke: var(--select); stroke-width: 1; }

/* Inline text edit ------------------------------------------------------------ */

.lf-textedit {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 1px solid var(--select);
  background: transparent;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  transform-origin: 50% 50%;
  box-sizing: border-box;
  caret-color: var(--select);
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
  pointer-events: auto;
}

/* Screen-reader announcements ---------------------------------------------------- */

.lf-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lf-view, .lf-stage { transition: none; }
}