/* ============================================================
   Process wheel refinements — icon-only satellite chips.
   Step headings are hidden on the wheel (full names live in the
   side panel); each stage shows just its SVG icon in a round
   chip on the photo's outer edge.
   ============================================================ */

/* label block is lifted out of the button flow and pushed
   outward along the node's radial direction (JS sets the transform) */
.wheel-label {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0 !important;
  z-index: 15;
  width: max-content;
  pointer-events: none;
}

/* step heading removed from the wheel */
.wheel-label > div:first-child {
  display: none !important;
}
.wheel-label .mt-1\.5 {
  margin-top: 0 !important;
}

/* the icon chip becomes the whole label — bigger, crisp, glassy */
.wheel-label span.grid {
  height: 36px !important;
  width: 36px !important;
  border: 1px solid oklch(1 0 0 / 0.9);
  box-shadow: 0 10px 22px -10px oklch(0.5 0.08 60 / 0.5);
  backdrop-filter: blur(6px);
}
.wheel-label span.grid svg {
  height: 16px !important;
  width: 16px !important;
}

/* stacking: hovered/active stage rises above its neighbours */
.wheel-node { z-index: 10; }
.wheel-node:hover { z-index: 30; }
.wheel-node-active { z-index: 25; }

/* number chip is repositioned by JS onto the photo's inner edge
   (inline left/top from JS win over the -top-3/left-1/2 utilities;
   only the transform needs forcing to full centering) */
.wheel-chip {
  transform: translate(-50%, -50%) !important;
}

/* small screens: slightly smaller icon chips */
@media (max-width: 560px) {
  .wheel-label span.grid {
    height: 28px !important;
    width: 28px !important;
  }
  .wheel-label span.grid svg {
    height: 13px !important;
    width: 13px !important;
  }
}