/* ─── knob.css — the shared knob cursor (js/knob.js?v=5; areas opt in with [data-knob]) ───
   Desktop mouse only. The native cursor is hidden only once knob.js has initialised
   (data-knob-live), and controls inside an area keep a normal pointer. */
:root { --knob-dot-default: var(--switch-plate); }
.rx-knob { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 64em) {
  :root[data-knob-live] [data-knob] { cursor: none; }
  /* While the knob is up (pointer over a plugin area, not on a control) the normal cursor is hidden on everything under it,
     including links and anything else that sets its own cursor. Moving onto a control drops the attribute and the pointer returns. */
  :root[data-knob-on], :root[data-knob-on] * { cursor: none !important; }
  :root[data-knob-live] [data-knob] :is(button, input, select, textarea, [role="switch"], [data-knob-off]) { cursor: pointer; }
  .rx-knob { display: block; position: fixed; z-index: 60; left: 0; top: 0; width: 5.6rem; height: 5.6rem; margin: -2.8rem 0 0 -2.8rem; pointer-events: none; opacity: 0; transition: opacity 400ms ease-out; }
  .rx-knob.is-on { opacity: 1; will-change: transform; }
  .rx-knob-body { position: absolute; inset: 0; border-radius: 50%; background: var(--knob-body); border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); transform: rotate(var(--a, 0deg)); transition: background-color 250ms ease-out, border-color 250ms ease-out; }
  /* over a dark surface (knob.js measures the background under the pointer) the body goes light so it stays visible */
  .rx-knob.is-light .rx-knob-body { background: var(--knob-body-light); border-color: color-mix(in srgb, var(--knob-body) 40%, transparent); }
  .rx-knob-dot { position: absolute; top: .8rem; left: 50%; width: 1.1rem; height: 1.1rem; margin-left: -.55rem; border-radius: 50%; background: var(--rx-dot, var(--knob-dot-default)); }
}
@media (prefers-reduced-motion: reduce) { .rx-knob { transition: none; } }