/* ==========================================================================
   CANVAS — Viewport, Raster, Selektion, Marquee
   ========================================================================== */
/* Seit Phase 3f ein Flex-Kind von #shell (chrome.css) statt eines fixierten
   Kastens mit gerechnetem Offset: die Breite ergibt sich aus dem, was
   Seitenleiste und Rail uebrig lassen. position:relative bleibt noetig, weil
   #canvas, #trayPill und #trayPanel absolut darin sitzen. min-width:0 hebt
   die Mindestbreite auf, die ein Flex-Kind sonst aus seinem Inhalt zieht. */
#viewport{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  background:var(--bg-canvas);
  touch-action:none;
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
  cursor:default;
}
#viewport.grid-on{
  background-image:radial-gradient(var(--grid-dot) 1px, transparent 1px);
  /* background-size/-position setzt updateTransform() */
}
/* Dateien vom Betriebssystem schweben über dem Canvas: Der Eingang ist das
   Unsorted-Tray, deshalb markiert der Rahmen die Fläche, nicht die Position. */
#viewport.drop-files::after{
  content:"Ablegen — landet im Unsorted-Tray";
  position:absolute; inset:8px;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:14px;
  border:2px dashed var(--line-focus); border-radius:var(--r-column);
  color:var(--line-focus); font-size:12.5px;
  pointer-events:none;
  z-index:540;
}
body.space #viewport{ cursor:grab; }
body.panning #viewport{ cursor:grabbing; }
body.drawmode #viewport{ cursor:crosshair; }
#canvas{
  position:absolute; left:0; top:0; width:0; height:0;
  transform-origin:0 0;
}

/* Auswahl-Konturen: gemalt statt gebaut (Nachtrag 2).
   #selRings ist eine 2D-Canvas-Ebene im Bildschirmraum. Sie sitzt als Kind in
   #canvas, damit die Stapelreihenfolge innerhalb des Canvas unverändert
   bleibt, und hebt dessen Transform per Gegen-Transformation wieder auf
   (setzt render/overlay.js inline). Alle Maße — Konturstärke, Abstand,
   Eckenradius, Griffdurchmesser, Blendzeit — liest der Maler aus den Tokens.
   Warum gemalt und nicht ein Knoten je Element: 500 Ringknoten kosteten je
   Zoomschritt 58 ms allein an Style-Recalc, unabhängig davon, wie viele davon
   im Bild lagen. Begründung und Messwerte stehen im Kopf von overlay.js. */
#selRings{
  position:absolute; left:0; top:0;
  transform-origin:0 0;
  pointer-events:none;
  z-index:1999998;
}

/* Beim Ziehen des Griffs stört der Cursor-Wechsel — er kommt von pointer.js */
body.sel-corner-nwse #viewport{ cursor:nwse-resize; }
body.sel-corner-nesw #viewport{ cursor:nesw-resize; }

/* Selektion — Kontur außerhalb des Elements, runde Eckgriffe.
   Die Box liegt um --sel-offset weiter außen als das Element; damit die
   Griffe an seinen Ecken sitzen, wird sie vergrößert statt nur ein Outline
   gezeichnet. Alle Werte skalieren über --inv mit dem Zoom.
   #selbox trägt die Griffe der EINZELauswahl; die Kontur zeichnet in beiden
   Fällen #selRings bzw. bei Linie und Sketch der Typ selbst. */
#selbox{
  position:absolute;
  margin:calc(-1 * var(--sel-offset) * var(--inv,1));
  padding:calc(var(--sel-offset) * var(--inv,1));
  box-sizing:content-box;
  border:0;
  border-radius:calc((var(--r-card) + var(--sel-offset)) * var(--inv,1));
  background:none;
  pointer-events:none;
  z-index:2000000;
  opacity:1;
  transition:opacity var(--sel-fade) ease;
}
/* Ausgeblendet bleibt die Box im Baum, damit sie ausblenden kann — sie darf
   dann aber nichts mehr abfangen. */
#selbox[hidden]{ display:block !important; opacity:0; }
#selbox[hidden] .sel-handle{ pointer-events:none; }
.sel-handle{
  position:absolute;
  width:calc(var(--sel-handle) * var(--inv,1));
  height:calc(var(--sel-handle) * var(--inv,1));
  background:var(--bg-card);
  border:calc(var(--sel-handle-bd) * var(--inv,1)) solid var(--line-focus);
  border-radius:50%;
  box-shadow:var(--shadow-handle);
  transform:translate(-50%,-50%);
  pointer-events:auto;
}
.sel-handle[data-dir="nw"]{ left:0;    top:0;    cursor:nwse-resize; }
.sel-handle[data-dir="n"] { left:50%;  top:0;    cursor:ns-resize;   }
.sel-handle[data-dir="ne"]{ left:100%; top:0;    cursor:nesw-resize; }
.sel-handle[data-dir="e"] { left:100%; top:50%;  cursor:ew-resize;   }
.sel-handle[data-dir="se"]{ left:100%; top:100%; cursor:nwse-resize; }
.sel-handle[data-dir="s"] { left:50%;  top:100%; cursor:ns-resize;   }
.sel-handle[data-dir="sw"]{ left:0;    top:100%; cursor:nesw-resize; }
.sel-handle[data-dir="w"] { left:0;    top:50%;  cursor:ew-resize;   }
#marquee{
  position:absolute;
  border:calc(1px * var(--inv,1)) dashed var(--line-focus);
  background:transparent;
  pointer-events:none;
  z-index:1999999;
}
/* Kantengriffe erscheinen nur, wo eine Achse allein resizebar ist.
   Regelfall: vier Eckgriffe. */
#selbox .sel-handle[data-dir="n"],
#selbox .sel-handle[data-dir="e"],
#selbox .sel-handle[data-dir="s"],
#selbox .sel-handle[data-dir="w"]{ display:none; }
/* Rahmen ohne Griffe: der Sketch bemisst sich nach seinem Inhalt */
#selbox.no-resize .sel-handle{ display:none; }
/* Nur die Breite ist frei: die Spalte zeigt ausschließlich links/rechts */
#selbox.width-only .sel-handle{ display:none; }
#selbox.width-only .sel-handle[data-dir="e"],
#selbox.width-only .sel-handle[data-dir="w"]{ display:block; }

/* Die Kontur zeichnet #selRings (richtiger Eckenradius je Typ), #selbox
   trägt ausschließlich die Griffe und bleibt selbst unsichtbar. */
#selbox{ box-shadow:none; }

/* Drop-Indikator der Spalte: 2-px-Linie an der Einfügestelle */
#dropIndicator{
  position:absolute;
  height:calc(2px * var(--inv,1));
  background:var(--line-focus);
  border-radius:1px;
  pointer-events:none;
  z-index:2000001;
}

/* Endpunkt- und Krümmungsgriffe des Pfeils */
#arrowHandles{
  position:absolute; left:0; top:0; width:0; height:0;
  z-index:2000000;
}
.ar-handle{
  position:absolute;
  width:calc(10px * var(--inv,1)); height:calc(10px * var(--inv,1));
  margin-left:calc(-5px * var(--inv,1)); margin-top:calc(-5px * var(--inv,1));
  background:var(--bg-card);
  border:calc(1.5px * var(--inv,1)) solid var(--line-focus);
  border-radius:50%;
  cursor:grab;
  pointer-events:auto;
}
/* Verankerter Endpunkt: gefüllt statt hohl */
.ar-handle.anchored{ background:var(--line-focus); }
/* Krümmungsgriff: eckig, damit er sich von den Endpunkten unterscheidet */
.ar-handle.curve{ border-radius:2px; background:var(--bg-chrome); }