/* ============================================================================
   gizmos.css — what the gizmos paint on the stage.

   Responsibility: the colours and weights of every mark a gesture is made
   with — the transform handles and their readouts (ui/tools/gizmo_render.js,
   gizmo_readout.js), Edit mesh's anchors, edges and faces
   (ui/render/edit_overlay.js) and the world axes (ui/render/grid.js). The
   markup carries classes; this decides what they look like.

   THE 2D APP'S LOOK. Its alignment and spacing gizmos are the model:
   hairlines, a value on a pill-shaped chip in dark bold monospace, a hollow
   anchor that fills when picked, a dashed faint-filled ghost, a dashed box
   round the pick, and the one handle in hand lit. Tooling gets bright hues
   no object uses, kept apart from the picture.

     --gx --gy --gz   the three axes, red, green, blue, as every 3D tool
     --sel            the pick: the 2D app's accent, sky blue
     --chip-ink       a chip's lettering, against the chip's bright fill

   THE STAGE IS DARK IN THE DARK THEME (ui/app.css). The tokens follow the
   page's theme switch — light by default, the system's dark preference
   unless data-theme="light", data-theme="dark" forcing it — so every mark
   reads on both grounds: deeper hues and white lettering on the light one,
   brighter hues and dark lettering on the dark one, as in the 2D app.

   Each gizmo is a group, `.gz`, whose class names its colour (`ax0`…`ax2`;
   none is the pick's) as --c, and whether it is lit (`hot`).
   ============================================================================ */
  :root{--gx:#e63946;--gy:#2a9d3a;--gz:#3a6ee8;--sel:#0284c7;--chip-ink:#fff;
        --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
        --gx:#ff5c6c;--gy:#4ade80;--gz:#60a5fa;--sel:#38bdf8;--chip-ink:#0e1116}}
  :root[data-theme="dark"]{--gx:#ff5c6c;--gy:#4ade80;--gz:#60a5fa;--sel:#38bdf8;--chip-ink:#0e1116}

  /* ---------- a gizmo's colour ---------- */
  #s .gz{--c:var(--sel)}
  #s .ax0{--c:var(--gx)}
  #s .ax1{--c:var(--gy)}
  #s .ax2{--c:var(--gz)}

  /* ---------- the transform handles ---------- */
  #s .gz-shaft{stroke:var(--c);stroke-width:1.5}
  #s .gz-neg{stroke:var(--c);stroke-width:1;stroke-dasharray:5 4;opacity:.55}
  #s .gz-ring{fill:none;stroke:var(--c);stroke-width:1.5}
  #s .gz.hot .gz-shaft{stroke-width:2.5}
  #s .gz.hot .gz-ring{stroke-width:3}
  /* a ring's handle: a solid dot in the axis colour, rimmed to read on either
     ground; lit, it grows and takes the ink's rim */
  #s .gz-knob{fill:var(--c);stroke:var(--chip-ink);stroke-width:1.5}
  #s .gz.hot .gz-knob{stroke:var(--ink);stroke-width:2}
  /* a chip: the handle's letter, or a drag's value */
  #s .gz-chip{fill:var(--c);stroke:var(--chip-ink);stroke-width:1}
  #s .gz.hot .gz-chip{stroke:var(--ink);stroke-width:2}
  #s .gz-tx{fill:var(--chip-ink);font-family:var(--mono);font-weight:700;
            text-anchor:middle;dominant-baseline:central}
  /* the centre: a hollow anchor, filled while it is the one in hand */
  #s .gz-anchor{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}
  #s .gz.hot .gz-anchor{fill:var(--sel);stroke-width:2}

  /* ---------- the readouts ---------- */
  #s .gz-box{fill:none;stroke:var(--sel);stroke-width:1.5;stroke-dasharray:6 4}
  #s .gz-sweep{fill:var(--c);fill-opacity:.12;stroke:var(--c);stroke-width:1.25;stroke-dasharray:5 4}

  /* ---------- Edit mesh: anchors, edges, faces ---------- */
  #s .vx{fill:var(--bg);stroke:var(--sel);stroke-width:1.5}
  #s .vx.on{fill:var(--sel);stroke:var(--ink)}
  #s .vx.hot{stroke:var(--ink);stroke-width:2.25}
  #s .ed{stroke:var(--ink);stroke-width:1;opacity:.5}
  #s .ed.on{stroke:var(--sel);stroke-width:2.5;opacity:1}
  #s .ed.hot{stroke:var(--sel);stroke-width:2;opacity:.8}
  #s .fc{fill:var(--sel);stroke:var(--sel)}
  #s .fc.on{fill-opacity:.22;stroke-width:1.5}
  #s .fc.hot{fill-opacity:.1;stroke-width:1.25;stroke-dasharray:5 4}

  /* ---------- the world axes ---------- */
  #s .gz-axis{stroke:var(--c)}

  /* ---------- the camera's target: ink with a halo, to read on any ground ---------- */
  #s .cam-target line{stroke:var(--ink);stroke-width:1.25}
  #s .cam-target-ring{fill:none;stroke:var(--sel);stroke-width:1.5;stroke-dasharray:4 3}
  #s .cam-target-dot{fill:var(--sel);stroke:var(--bg);stroke-width:1.5}
  /* Pick point is armed: the next press aims, so the stage says so */
  #s.picking{cursor:crosshair !important}