/* SD-40: the 3-D charts' shared controls and their expanded workspace (studio/ui/gl3d.js), on the Strategy tokens */
.gl3d-seg { display: inline-flex; border: 1px solid var(--sx-panel-rule); border-radius: 6px; overflow: hidden; background: var(--sx-inset); }
.gl3d-seg button { font: inherit; font-size: 12px; color: var(--sx-ink-2); background: transparent; border: 0; padding: 4px 10px; cursor: pointer; }
.gl3d-seg button + button { border-left: 1px solid var(--sx-panel-rule); }
.gl3d-seg button[aria-pressed="true"] { color: var(--sx-ink); background: var(--sx-ui-soft); box-shadow: inset 0 -2px 0 var(--sx-ui); }
.gl3d-btn { font: inherit; font-size: 12px; color: var(--sx-ink-2); background: var(--sx-inset); border: 1px solid var(--sx-panel-rule); border-radius: 6px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.gl3d-btn:hover { color: var(--sx-ink); border-color: var(--sx-axis); }
.gl3d-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* the expanded workspace: over the page, the plot filling it; the page underneath does not scroll */
.gl3d-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: stretch; justify-content: stretch; padding: 3vh 3vw; background: rgba(6, 8, 12, 0.62); }
.gl3d-panel { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 14px; border: 1px solid var(--sx-panel-rule); border-radius: 10px;
  background: linear-gradient(165deg, var(--sx-panel-a), var(--sx-panel-b)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); color: var(--sx-ink); }
.gl3d-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.gl3d-title { font-size: 14px; font-weight: 500; color: var(--sx-ink); }
.gl3d-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gl3d-tools > * { flex-wrap: wrap; }
.gl3d-body { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; border-radius: 6px; }
.gl3d-body > * { width: 100%; height: 100%; }
html.gl3d-locked, html.gl3d-locked body { overflow: hidden; }
/* the Optimization screen's heat sheet (studio/ui/questions.js) */
.q-gl-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 300px; max-height: 520px; overflow: hidden; border-radius: 6px; }
.q-gl-wrap > div { width: 100%; height: 100%; }
.gl3d-body > .q-gl-wrap { aspect-ratio: auto; max-height: none; min-height: 0; }
.q-glbar { margin: 4px 0 6px; }
.q-glbar .q-gl-hint { font-size: 11.5px; color: var(--sx-ink-3); }
/* the Keep in frame toggle: pressed like a seg button */
.gl3d-keep[aria-pressed="true"] { color: var(--sx-ink); border-color: var(--sx-ui); box-shadow: inset 0 -2px 0 var(--sx-ui); }
/* SD-46 refinement: free zoom's way back, over the scene's top right corner */
.gl3d-cut { position: absolute; top: 8px; right: 8px; z-index: 3; }
.gl3d-cut[hidden] { display: none; }