/* 32 · chips as role pills (the user, 2026-10-13: "orient on how the character categories look, make them
   seamlessly blend in and mostly have aura effects, use Discord as a starting ground").
   Discord's role chip is the start: a borderless pill of faint tint, the role's colour dot, the name in plain ink.
   The pill blends into the engine's ground (tinted by its own gem, never a pasted-on block); the aura is the state:
   a soft halo of the gem round the chosen pill that breathes on the beat. The edge stays the same width in every
   state, so nothing shifts; only the light changes. Loaded after 30-engine.css, so it wins at equal specificity. */

/* every chip carries a gem; the reroll and anything without one falls back to the plain ink */
.rw-chip{--k0:var(--rw-chip-ink);--k1:var(--rw-chip-ink);--k2:var(--rw-chip-ink);--k3:var(--rw-chip-ink);--k4:var(--rw-chip-ink)}

/* the pill itself (tint, edge, size, padding) is the Button type, 06-button.css --chip and --reroll; here only the
   chip's own states */

/* the role dot: the gem's gradient with a small glow of its own */
.rw-chip__dot{flex:none;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--k1),var(--k3) 70%,var(--k4));
  box-shadow:0 0 5px color-mix(in oklab,var(--k2) 55%,transparent)}

/* the aura: a halo layer behind the pill, still in itself (no blur filter); only its opacity moves, so a breath
   costs no repaint */
.rw-chip::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px color-mix(in oklab,var(--k2) 34%,transparent),0 0 8px color-mix(in oklab,var(--k2) 42%,transparent),
    0 0 14px color-mix(in oklab,var(--k3) 22%,transparent);
  transition:opacity var(--t2) var(--e)}
.rw-chip:hover{background:color-mix(in oklab,var(--k2) 14%,transparent)}
.rw-chip:hover::after{opacity:.45}
.rw-chip[aria-pressed="true"]{background:color-mix(in oklab,var(--k2) 18%,transparent);border-color:color-mix(in oklab,var(--k2) 40%,transparent)}
.rw-chip[aria-pressed="true"]::after{opacity:1;animation:rw-chip-aura-breathe calc(var(--rw-beat) * 2) ease-in-out infinite}
.rw-chip[aria-pressed="true"] .rw-chip__dot{box-shadow:0 0 6px var(--k2),0 0 12px color-mix(in oklab,var(--k3) 60%,transparent)}
@keyframes rw-chip-aura-breathe{0%,100%{opacity:.7}50%{opacity:1}}

/* tight rows keep the same shape, smaller */
.rw-engine__row.is-tight .rw-chip{padding:5px 11px 5px 8px;font-size:13px;gap:6px}
.rw-engine__row.is-tighter .rw-chip{padding:4px 9px 4px 7px;font-size:12px;gap:5px}
.rw-engine__row.is-tighter .rw-chip__dot{width:7px;height:7px}

/* the chips' aura needs room: the row scrolls sideways, so it clips; its padding is wider than the halo's reach
   (14px), so the halo fades out inside it and is never cut into a box (the user on v77: the hard pink rectangle
   behind Hero). The negative margin keeps the row where it was */
.rw-chips{padding:16px 16px;margin:-16px -16px}

/* type that lines up: the hint under the radar speaks in the body face like the axis names, not in the data face */
.rw-engine__hint{font-family:var(--f-body);font-size:12px;letter-spacing:.01em}

@media (prefers-reduced-motion:reduce){.rw-chip[aria-pressed="true"]::after{animation:none}}