/* ============================================================================
   arrange.css — what arranging paints on the stage.

   Responsibility: the guides, the measurements, the ghosts of a pending
   command and the gap handles — every one of them drawn over a DARK canvas,
   so each colour is a bright one that no object's default palette uses:

     magenta  alignment guides — the convention users already read
     orange   equal spacing
     red      distances

   Every line is non-scaling, so a guide is a hairline at any zoom; the sizes
   of marks and labels are set by ui/arrange/guide_render.js from the view's
   pixels per unit, for the same reason.
   ============================================================================ */
:root{ --guide:#ff2bd6; --space:#ff7b2e; --dist:#ff3b5c; --chip-ink:#0e1116; }

g#layerGuides{pointer-events:none}
g#layerGuides .live.hidden, g#layerGuides .handles.hidden{display:none}
g#layerGuides line, g#layerGuides path{vector-effect:non-scaling-stroke;fill:none}

/* alignment: a hairline, and an × where it meets each box */
g#layerGuides .ag-line{stroke:var(--guide);stroke-width:1}
g#layerGuides .ag-mark{stroke:var(--guide);stroke-width:1.25}

/* spacing and distances: a bar with end ticks and a labelled chip */
g#layerGuides .ag-space line{stroke:var(--space);stroke-width:1.25}
g#layerGuides .ag-dist line{stroke:var(--dist);stroke-width:1}
g#layerGuides .ag-space .chip{fill:var(--space)}
g#layerGuides .ag-dist .chip{fill:var(--dist)}
/* a measurement's lead out to a box it does not touch, and that box */
g#layerGuides .ag-dist line.lead{stroke-dasharray:3 3}
g#layerGuides .ag-frame{fill:none;stroke:var(--dist);stroke-width:1;vector-effect:non-scaling-stroke}
g#layerGuides text{fill:var(--chip-ink);font-family:var(--mono);font-weight:700;
  text-anchor:middle;dominant-baseline:central}

/* a pending command: where each object WILL go */
g#layerGuides .ag-ghost{stroke:var(--guide);stroke-width:1.25;stroke-dasharray:5 4;
  fill:rgba(255,43,214,.10)}

/* the gap handles: the only things in the layer a press can land on — the
   select tool hit-tests them itself, since every catcher lies above */
g#layerGuides .ag-pill .chip{fill:var(--space);stroke:var(--chip-ink);stroke-width:1;
  vector-effect:non-scaling-stroke}
g#layerGuides .ag-pill.hot .chip{fill:#ffb27e}

/* ---- the Arrange panel ---- */
.arrrow{gap:4px;margin-top:8px;align-items:center}
.arrrow button.arrbtn{width:30px;min-width:30px;height:28px;padding:0;display:inline-flex;
  align-items:center;justify-content:center}
.arrrow button.arrbtn svg{width:17px;height:17px}
.arrrow button.arrbtn:disabled{opacity:.35;cursor:default}
.arrgap{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11px;color:var(--ink-dim)}
.arrgap input{width:68px}
.arrpos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px}
.arrpos label{display:flex;align-items:center;gap:5px;font:600 11px/1 var(--mono);color:var(--ink-dim)}
.arrpos input{flex:1 1 0;width:0;min-width:0}
/* the guides fold's legend: each gizmo's key in the colour it is drawn in */
.arrkeys{margin-top:9px}
.arrkeys .k.ag{color:var(--guide)}
.arrkeys .k.sp{color:var(--space)}
.arrkeys .k.ds{color:var(--dist)}
/* ---- the snapping section (Guides & Grid panel) ---- */
.aidfold{margin-top:9px}
/* snapping off: the targets greyed, still ticked and still clickable */
.snapoff .checks{opacity:.45}
.snapmaster{display:flex;align-items:center;gap:6px;margin-top:8px;font-weight:600;color:var(--ink)}
/* where a snapped point landed: a ring on the anchor it hit, a cross on the
   grid point */
g#layerGuides .ag-ring{fill:none;stroke:var(--guide);stroke-width:1.5;vector-effect:non-scaling-stroke}
g#layerGuides .ag-cross{stroke:var(--guide);stroke-width:1.5}