/* The orientation corner and zoom buttons shared by the 3D apps (decisions/040). Tokens only (decisions/009). */
.c3d-corner { max-width: calc(100% - var(--space-4)); position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.c3d-views, .c3d-zoom { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.c3d-corner .c3d-btn { min-width: 44px; height: 44px; padding: 0 var(--space-2); }
.c3d-gizmo { display: none; width: 88px; height: 88px; touch-action: none; cursor: grab; background: var(--paper-raised); border: var(--stroke-hair) solid var(--rule); border-radius: var(--radius-md); }
.c3d-gizmo:active { cursor: grabbing; }
.c3d-axis { cursor: pointer; }
.c3d-axis line { stroke: var(--ink-muted); stroke-width: 2; }
.c3d-axis circle { fill: var(--paper-sunk); stroke: var(--ink); stroke-width: 1.5; }
.c3d-axis:hover circle { fill: var(--marigold-wash); }
.c3d-axis-top circle { fill: var(--prussian-wash); }

/* a phone has no room for a gizmo; from tablet width the gizmo takes over Front and Top */
@media (min-width: 768px) {
  .c3d-corner { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: start; }
  .c3d-gizmo { display: block; grid-column: 1; grid-row: 1 / 3; }
  .c3d-views { grid-column: 2; grid-row: 1; }
  .c3d-zoom { grid-column: 2; grid-row: 2; }
  .c3d-corner .c3d-btn.c3d-front, .c3d-corner .c3d-btn.c3d-top { display: none; } /* outranks an artifact's own button display */
}