/* ============================================================================
   aids.css — what the layout aids paint with.

   Responsibility: appearance only, for what ui/rulers/ and ui/grid/ build
   — on the stage and in their panel. One file for all of them, linked once
   by the page.

   ON A DARK STAGE. The rulers are a shade lighter than the canvas so they
   read as furniture beside it; their ticks and labels are muted, so they
   never compete with the drawing; what moves on them (the pointer's mark,
   the pick's span) is bright — white, and the selection's cyan.

   THE BAND. Showing the rulers reserves 20 px on the stage's top and left
   edges — the strips' thickness, `BAND` in ui/rulers/ruler_view.js — and
   moves the overlays that sit on those edges in by the same amount, so the
   rulers never cover the drawing or the bars over it.
   ============================================================================ */
:root{ --ruler-bg:#131922; --ruler-edge:#2b3442; --ruler-tick:#4b5768; --ruler-ink:#8d99ab;
       --ruler-mark:#eaf1fa; --ruler-span:#38bdf8; --ruler-drop:#f87171; }

/* ---- the band ---- */
.stage.has-rulers{padding:38px 18px 18px 38px}
.stage.has-rulers .projbar{left:46px;top:42px}
.stage.has-rulers .projnote{left:46px;top:84px}
.stage.has-rulers .legend{top:42px}
.stage.has-rulers .hint:not(.selhint):not(.drawhint){left:46px}

/* ---- the strips and the corner ---- */
.ruler,.ruler-corner{position:absolute;background:var(--ruler-bg);z-index:1;overflow:hidden;
  user-select:none}
.ruler.top{box-shadow:inset 0 -1px 0 var(--ruler-edge)}
.ruler.left{box-shadow:inset -1px 0 0 var(--ruler-edge)}
.ruler svg{display:block;width:100%;height:100%}
.ruler-scale path{fill:none;stroke:var(--ruler-tick);stroke-width:1;shape-rendering:crispEdges}
.ruler-scale text{fill:var(--ruler-ink);font:9px/1 var(--mono)}
.ruler-corner{box-shadow:inset -1px -1px 0 var(--ruler-edge);cursor:crosshair}
/* the corner's mark: zero, where the two rulers start */
.ruler-corner::before,.ruler-corner::after{content:"";position:absolute;background:var(--ruler-ink)}
.ruler-corner::before{left:5px;right:6px;top:9px;height:1px}
.ruler-corner::after{top:5px;bottom:6px;left:9px;width:1px}

/* ---- what moves on them ---- */
.ruler .ruler-cursor{stroke:var(--ruler-mark);stroke-width:1;shape-rendering:crispEdges}
.ruler .ruler-span .band{fill:rgba(56,189,248,.16)}
.ruler .ruler-span .edge{fill:none;stroke:var(--ruler-span);stroke-width:1;shape-rendering:crispEdges}
.ruler .ruler-span .back{fill:var(--ruler-bg)}
.ruler .ruler-span text{fill:var(--ruler-span);font:700 9px/1 var(--mono)}
/* a guide held over a ruler is deleted when let go there */
.ruler.drop{background:#3a161b;box-shadow:inset 0 0 0 1px var(--ruler-drop)}
.ruler.drop .ruler-scale text{fill:#fca5a5}

/* ---- the ruler guides (#layerRulerGuides) ----
   `--rguide` is the guides' colour setting, written on the stage by
   ui/rulers/guide_lines.js; widths and dashes are set there, in screen
   pixels. Mint by default: no object's palette, no other gizmo uses it. */
g#layerRulerGuides{pointer-events:none}
g#layerRulerGuides .line{stroke:var(--rguide,#5effa1);fill:none}
g#layerRulerGuides .hot .line{stroke:#b7ffd3}
g#layerRulerGuides .selected .line{stroke:#ffffff}
g#layerRulerGuides .glow{stroke:var(--rguide,#5effa1);opacity:.35;fill:none}
g#layerRulerGuides .locked{opacity:.55}
/* the dragged guide's position label, in the guides' colour */
g#layerGuides .rg-chip .chip{fill:var(--rguide,#5effa1)}
/* the zero's crosshair while it is dragged out of the corner */
g#layerRulerGuides .pending.origin .line{stroke:var(--ruler-mark)}
/* what a press on each part of the rulers does */
.ruler.top{cursor:row-resize}
.ruler.left{cursor:col-resize}

/* ---- a guide's position, typed (ui/rulers/guide_editor.js) ---- */
.guide-edit{position:absolute;z-index:3;width:76px;height:20px;padding:0 6px;
  font:11px/18px var(--mono);color:var(--ink-bright);background:#0b0f14;
  border:1px solid var(--rguide,#5effa1);border-radius:4px;outline:none}
.guide-edit.shake{animation:guideShake .3s;border-color:var(--ruler-drop)}
@keyframes guideShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---- the Guides section's list ---- */
.guidebtns{margin-top:9px}
.guidecentres{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:12px;color:var(--ink);cursor:pointer}
.guidelist{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.guiderow{display:flex;align-items:center;gap:6px;padding:3px 6px;border:1px solid transparent;
  border-radius:6px;cursor:pointer}
.guiderow:hover{background:var(--panel2)}
.guiderow.on{border-color:var(--rguide,#5effa1);background:rgba(94,255,161,.06)}
.guiderow .gkind{width:14px;text-align:center;font:13px/1 var(--mono);color:var(--rguide,#5effa1)}
.guiderow .gpos,.guiderow .gpt{flex:1 1 0;min-width:0;width:0}
.guiderow .mini{padding:2px 6px;font-size:10.5px;line-height:1.3;flex:none}
.guiderow .mini svg{width:13px;height:13px;display:block}
.guiderow .mini.lock.on{color:var(--warn)}

/* ---- a selected angled guide's handles (ui/rulers/guide_rotate.js) ---- */
g#layerRulerGuides .turn .arm{stroke:#ffffff;opacity:.6}
g#layerRulerGuides .turn .pivot{fill:#ffffff;stroke:var(--rguide,#5effa1)}
g#layerRulerGuides .turn .knob{fill:var(--rguide,#5effa1);stroke:#0e1116}
g#layerRulerGuides .turn .hot{fill:#ffffff;stroke:var(--rguide,#5effa1)}
g#layerRulerGuides .turn .knob.hot{stroke-width:2.5}
/* a guide a snap has landed on */
g#layerRulerGuides .lit .line{stroke:#ffffff}

/* ---- the layout grid (#layerLayout, ui/grid/layout_render.js) ----
   `--layout` is its colour setting; a light wash for the bands so the
   artwork shows through, hairlines for their edges and the baseline */
g#layerLayout{pointer-events:none}
g#layerLayout .lg-band{fill:var(--layout,#818cf8);fill-opacity:.1}
g#layerLayout .lg-edge{stroke:var(--layout,#818cf8);stroke-opacity:.45}
g#layerLayout .lg-base{stroke:var(--layout,#818cf8);stroke-opacity:.35}

/* ---- the view bar's switches (ui/view/view_toggles.js) ---- */
.viewbar .aidtoggles{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding-left:8px;
  border-left:1px solid #2a3441}
.viewbar button.aidbtn{min-width:24px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center}
.viewbar button.aidbtn svg{width:15px;height:15px;display:block}
.viewbar button.aidbtn.caret{min-width:16px;padding:0 1px;margin-left:-3px}
.viewbar button.aidbtn.caret svg{width:12px;height:12px}
/* lit while its aid is on, in the guides' mint */
.viewbar button.aidbtn.on{background:#1b3326;color:#5effa1;border-color:#2f5a3e}
/* the snapping legend's ruler-guide key, in the guides' colour */
.arrkeys .k.rg{color:var(--rguide,#5effa1)}