/* ============================================================================
   arrange_3d.css — what arranging looks like: its gizmos on the stage, and
   the Arrange panel's rows.

   Responsibility: the look of arranging's own markup — the guides, bars,
   footprints, wire boxes and ghosts on the stage (ui/arrange/
   guide_render_3d.js), the gap handles; the panel's axis rows, its icon
   buttons, Position and Size, the Snapping section — on top of the shared
   styles (ui/render/gizmos.css, ui/panels/panels.css).

     --space   equal spacing, the 2D app's token by name and light value:
               orange, so "these gaps are equal" never reads as an axis.
               Its chips carry dark lettering in both themes — white on
               orange does not read

   EVERY MARK READS ON BOTH GROUNDS. The stage is dark in the dark theme:
   each colour here is a token defined light and dark (the axis colours and
   --sel are gizmos.css's), and a mark drawn over objects has a halo or a
   fill faint enough to see through.

   EACH AXIS WEARS ITS GIZMO COLOUR: X red, Y green, Z blue — the tokens
   ui/render/gizmos.css defines for both themes — so a row reads as the axis
   the arrows on the stage point along.
   ============================================================================ */
  :root{--space:#ff7b2e;--space-ink:#0e1116}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--space:#ff9a57}}
  :root[data-theme="dark"]{--space:#ff9a57}

  /* ---------- on the stage ---------- */
  #s .gz.sp{--c:var(--space)}
  #s .gz.sp .gz-tx{fill:var(--space-ink)}
  /* an alignment guide: a dashed hairline in its axis's colour, its ends ticked */
  #s .gz-guide{stroke:var(--c);stroke-width:1.25;stroke-dasharray:4 3}
  #s .gz-tick{fill:var(--c);stroke:var(--bg);stroke-width:1}
  /* a dimension bar: a distance, a gap, a measure */
  #s .gz-dim line{stroke:var(--c);stroke-width:1.25}
  /* where a box stands on a plane; faint for the depth cue, which only reads */
  #s .gz-foot{fill:var(--c);fill-opacity:.08;stroke:var(--c);stroke-width:1.25;stroke-dasharray:5 4}
  #s .gz-foot.faint{fill-opacity:.04;opacity:.6}
  #s .gz-drop{stroke:var(--c);stroke-width:1;stroke-dasharray:2 3}
  /* the box round a pick of several, dashed; the key object's own, solid */
  #s .gz-wire{fill:none;stroke:var(--c);stroke-width:1.25;stroke-dasharray:6 4}
  #s .gz-wire.key{stroke-dasharray:none;stroke-width:1.5}
  /* where a command would put each pick */
  #s .gz-ghost .gz-wire{stroke-width:1;opacity:.85}
  /* a gap handle: the one arranging mark that takes a press */
  #s .gz-gap .gz-chip{cursor:grab}
  #s .gz-ghost line{stroke:var(--c);stroke-width:1.25;stroke-dasharray:3 3;opacity:.9}

  /* ---------- the panel ---------- */
  .arr-x,.panel label.arr-x{color:var(--gx)}
  .arr-y,.panel label.arr-y{color:var(--gy)}
  .arr-z,.panel label.arr-z{color:var(--gz)}
  .arr-grid{display:grid;grid-template-columns:18px repeat(3,1fr);gap:6px;align-items:center}
  .arr-ax{font-weight:600;text-align:center}
  .panel button.arrbtn{display:inline-flex;align-items:center;justify-content:center;gap:2px;padding:3px 6px}
  .arrbtn svg{width:18px;height:18px;flex:none}
  .arrbtn span{font-weight:600;font-size:12px}
  .panel button.arrbtn:disabled{opacity:.4;cursor:not-allowed}
  .arr-cmds .lbl{min-width:68px}
  .arr-pos{display:grid;grid-template-columns:68px repeat(3,minmax(0,1fr));gap:6px;align-items:center}
  .arr-pos label,.arr-pos span:not(.lbl){display:flex;align-items:center;gap:4px;font-weight:600;min-width:0}
  .arr-pos output{color:var(--ink);font-weight:400}
  .panel .arr-pos input[type=text]{flex:1;width:100%;padding:4px 6px;font-weight:400}
  .panel #arrGap,.panel #snapPx,.panel #nudgeStep,.panel #nudgeBig{flex:none;width:3.8em}
  .panel .note{margin:0;color:var(--muted);font-size:12px}
  .panel .note:empty{display:none}
  .arr-snap{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--grid);padding-top:8px}
  .arr-snap > label{display:flex;align-items:center;gap:6px}