/* ============================================================================
   camera_hud.css — the camera controls over the stage's bottom left.

   Responsibility: how the controls look. The markup is ui/panels/
   camera_hud.js; the colours are the theme's tokens (ui/app.css) and the
   gizmo's axis colours (ui/render/gizmos.css), so the controls follow the
   light and dark themes with the stage they sit on.

   A CARD OVER THE STAGE, not in the page's flow: the stage keeps its whole
   size, and the card is solid enough to read over anything drawn under it.
   Only the card takes presses; the stage around it is the stage's. Folded
   (`.folded`), it is one 30 px camera button in the corner.
   ============================================================================ */
  #hudHost{position:absolute;left:12px;bottom:12px;z-index:2;max-width:calc(100% - 24px)}
  .cam-hud{background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--grid);
           border-radius:12px;padding:8px;box-shadow:0 4px 18px rgba(0,0,0,.18);font-size:12px;
           color:var(--ink);-webkit-user-select:none;user-select:none}
  .cam-hud button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--grid);
                  border-radius:6px;padding:3px 8px;cursor:pointer;touch-action:none}
  .cam-hud button:hover{border-color:var(--ink)}
  .cam-hud button.on{background:var(--ink);color:var(--bg)}

  /* ---------- always shown: compass, orbit pad, zoom, more ---------- */
  .cam-main{display:flex;align-items:center;gap:8px}
  .cam-pad{display:grid;grid-template-columns:repeat(3,26px);grid-auto-rows:26px;gap:3px}
  .cam-pad button,.cam-zoom button{padding:0;font-size:12px;line-height:1}
  .cam-zoom{display:grid;grid-template-columns:26px;grid-auto-rows:26px;gap:3px}
  .cam-zoom button{font-size:16px}
  .cam-side{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;gap:6px}
  .cam-hud .cam-more,.cam-hud .cam-fold{width:30px;height:30px;padding:0;font-size:15px;line-height:1}
  .cam-fold svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;
                vertical-align:middle}

  /* ---------- folded: one small camera button, nothing else over the stage ---------- */
  .cam-hud.folded{padding:4px;border-radius:10px}
  .cam-hud.folded .cam-main > :not(.cam-side),.cam-hud.folded .cam-more,.cam-hud.folded .cam-adv{display:none}
  .cam-fold .cam-fold-closed,.cam-hud.folded .cam-fold-open{display:none}
  .cam-hud.folded .cam-fold-closed{display:inline}

  /* ---------- the compass ---------- */
  .cam-compass{width:84px;height:84px;cursor:grab;touch-action:none;display:block}
  .cam-compass:active{cursor:grabbing}
  .cam-compass .ax0{--c:var(--gx)}
  .cam-compass .ax1{--c:var(--gy)}
  .cam-compass .ax2{--c:var(--gz)}
  .cc-face{fill:var(--bg);stroke:var(--grid)}
  .cc-arm{stroke:var(--c);stroke-width:2;pointer-events:none}
  .cc-arm.neg{stroke-width:1;opacity:.5}
  .cc-end{cursor:pointer}
  .cc-end circle{fill:var(--c);stroke:var(--chip-ink);stroke-width:1}
  .cc-end.neg circle{fill:var(--bg);stroke:var(--c);stroke-width:1.5}
  .cc-end:hover circle{stroke:var(--ink);stroke-width:2}
  .cc-end text{fill:var(--chip-ink);font:700 9px var(--mono);text-anchor:middle;dominant-baseline:central;
               pointer-events:none}
  .cc-hub{fill:var(--ink)}

  /* ---------- more: target, angle, sphere, pan, show target ---------- */
  .cam-adv{margin-top:8px;padding-top:8px;border-top:1px solid var(--grid);display:grid;gap:6px;
           width:min(300px,calc(100vw - 48px))}
  .cam-adv[hidden]{display:none}
  .cam-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
  .cam-indent{padding-left:52px}
  .cam-h{width:47px;color:var(--muted);font-weight:600;text-transform:uppercase;font-size:10px;
         letter-spacing:.06em}
  .cam-adv label{display:flex;align-items:center;gap:3px;color:var(--muted)}
  .cam-adv input[type=number]{width:54px;font:inherit;color:var(--ink);background:var(--panel);
                              border:1px solid var(--grid);border-radius:5px;padding:2px 4px}
  .cam-adv input[type=range]{flex:1;min-width:80px}
  .cam-eye{margin-left:auto;color:var(--muted);font-family:var(--mono);font-size:11px}