/* The ring is an INSET shadow, not a border. A border pushes every absolutely
 * positioned child inward by its own width, which put the hub a pixel past the
 * screen edge on an edge panel -- the one place a pixel shows. */
.cx-wheel {
  position: fixed; pointer-events: auto; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--elev-3) 92%, transparent);
  box-shadow: var(--shadow-3), inset 0 0 0 var(--bw) var(--line);
  backdrop-filter: blur(var(--blur-sm));
  animation: cx-wheel-in var(--dur-1) var(--ease-standard);
}
@keyframes cx-wheel-in { from { opacity: 0; transform: scale(.9); } }

/* The lit shape IS the region that picks the item, so the target is legible
 * instead of implied by a box around a label. */
.cx-wheel-canvas { position: absolute; inset: 0; pointer-events: none; }
.cx-wheel-wedge {
  fill: transparent;
  stroke: color-mix(in srgb, var(--line) 70%, transparent);
  stroke-width: 1;
  transition: fill var(--dur-1) var(--ease-standard), stroke var(--dur-1) var(--ease-standard);
}
.cx-wheel-wedge.cx-on { fill: var(--accent-soft); stroke: var(--accent); }

.cx-wheel-item {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  width: var(--wheel-item-w); padding: var(--sp-1) 0; line-height: 1.15; overflow-wrap: anywhere;   /* long names wrap inside the ring instead of sticking out of it */
  background: transparent; border: 0; color: var(--muted);
  font-size: var(--fs-7); cursor: pointer; text-align: center;
  transition: color var(--dur-1) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard);
}
.cx-wheel-item .cx-wheel-icon { font-size: var(--fs-2); line-height: 1; }
.cx-wheel-item.cx-on {
  color: var(--accent-text);
  transform: translate(-50%, -50%) scale(1.06);
}

/* Sized to the dead zone exactly (radius 42), so the cancel target you can see
 * is the cancel target you can hit. */
/* left/top/size come from the geometry so the drawn hub and the cancel region
 * are the same circle. */
.cx-wheel-hub {
  position: absolute; transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  border: var(--bw) dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--faint);
  transition: border-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard),
              background var(--dur-1) var(--ease-standard);
}
.cx-wheel-hub-glyph { font-size: var(--fs-2); line-height: 1; }
.cx-wheel-hub.cx-on {
  border-color: var(--danger); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* Half wheels sit ON the edge: the off-screen half is simply clipped by the
 * viewport, which is what gives the edge-panel silhouette. The flat side gets a
 * straight edge so it reads as pinned rather than cropped by accident. */
.cx-wheel-half { backdrop-filter: blur(var(--blur-md)); }