/* ============================================================================
   app.css — every rule the page paints with.

   Responsibility: appearance only. No rule here knows what an object is; the
   page adds and removes classes, and this decides what they look like.

   The panels' own rules are in ui/panels/panels.css.

   THE THEME IS FIVE TOKENS on :root, light by default. The system's dark
   preference switches them unless the page says data-theme="light", and
   data-theme="dark" forces them. Every colour below reads a token, so a
   theme is one block of values. The gizmos' own colours are tokens too, kept
   with their rules in ui/render/gizmos.css, which switches with this theme.

   THE STAGE HAS NO BACKGROUND OF ITS OWN: the SVG shows the body's --bg,
   which is near-black in the dark theme. Anything drawn on it — objects,
   gizmos, handles, strokes — has to read on that dark ground as well as on
   the light one.
   ============================================================================ */
  :root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);
        padding-bottom:env(safe-area-inset-bottom,0px);
        --bg:#f6f5f1;--panel:#fff;--ink:#222;--grid:#c9c6bc;--muted:#777}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
        --bg:#1b1c1f;--panel:#26272b;--ink:#eee;--grid:#44464c;--muted:#999}}
  :root[data-theme="dark"]{--bg:#1b1c1f;--panel:#26272b;--ink:#eee;--grid:#44464c;--muted:#999}
  html,body{height:100%;margin:0}
  body{background:var(--bg);color:var(--ink);font:14px system-ui,-apple-system,"Segoe UI",sans-serif}

  /* ---------- the page: the stage, and the panels' column to its right ----------
     The column has a fixed width and scrolls on its own, so opening a panel
     never resizes the stage under the user's pointer. */
  .app{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:100%}
  .app.panels-off{grid-template-columns:minmax(0,1fr) 44px}
  .stage{display:flex;flex-direction:column;min-width:0;min-height:0}
  /* the stage's view: the SVG, with the camera controls laid over its corner */
  .view{position:relative;flex:1;min-height:0;display:flex}
  /* a phone: the stage on top, the panels under it */
  @media (max-width:720px){
    .app,.app.panels-off{grid-template-columns:1fr;grid-template-rows:60vh auto;height:auto;min-height:100%}
  }

  /* ---------- the stage ---------- */
  /* `#s`, not `svg`: the camera controls carry an SVG of their own. Every
     press on the stage is a gesture, never a text selection: a click then a
     drag would otherwise select the gizmo's chips and readouts. */
  #s{flex:1;width:100%;min-height:0;touch-action:none;cursor:crosshair;
     -webkit-user-select:none;user-select:none}
  #s path,#s line,#s text{pointer-events:none}
  #s.move [data-id]{cursor:move}
  #s.move [data-axis],#s.move [data-ring],#s.move [data-sc],#s.move [data-uni],
  #s.move [data-vi],#s.move [data-ek]{cursor:pointer}
  .hint{padding:4px 10px;color:var(--muted);font-size:12px;min-height:16px}