/* Color wheel — scoped; does not alter global site tokens. */

.color-wheel {
    --cw-size: min(240px, 62vw);
    --cw-ring: 3px;
    --cw-puck: 12px;
    --cw-cross: #bbb;
    position: relative;
    width: var(--cw-size);
    height: var(--cw-size);
    margin: 0 auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.color-wheel__disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Soft hue toward the edge; white at center — not a saturated pie. */
    background:
        radial-gradient(circle closest-side, #fff 0%, rgba(255, 255, 255, 0.95) 48%, rgba(255, 255, 255, 0.72) 78%, rgba(255, 255, 255, 0.45) 100%),
        conic-gradient(
            from -90deg,
            oklch(0.78 0.12 0deg),
            oklch(0.78 0.12 60deg),
            oklch(0.78 0.12 120deg),
            oklch(0.78 0.12 180deg),
            oklch(0.78 0.12 240deg),
            oklch(0.78 0.12 300deg),
            oklch(0.78 0.12 360deg)
        );
    box-shadow: inset 0 0 0 1px #ddd;
}

.color-wheel__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
        from -90deg,
        oklch(0.72 0.14 0deg),
        oklch(0.76 0.14 60deg),
        oklch(0.78 0.14 120deg),
        oklch(0.76 0.14 180deg),
        oklch(0.72 0.14 240deg),
        oklch(0.72 0.14 300deg),
        oklch(0.72 0.14 360deg)
    );
    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - var(--cw-ring) - 0.5px),
            #000 calc(100% - var(--cw-ring))
        );
    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - var(--cw-ring) - 0.5px),
            #000 calc(100% - var(--cw-ring))
        );
}

.color-wheel__crosshair {
    position: absolute;
    background: var(--cw-cross);
    pointer-events: none;
    z-index: 1;
}

.color-wheel__crosshair--h {
    left: var(--cw-ring);
    right: var(--cw-ring);
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.color-wheel__crosshair--v {
    top: var(--cw-ring);
    bottom: var(--cw-ring);
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
}

.color-wheel__dots {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.color-wheel__dot {
    position: absolute;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.85);
    opacity: 0.55;
    box-sizing: border-box;
}

.color-wheel__puck {
    position: absolute;
    width: var(--cw-puck);
    height: var(--cw-puck);
    margin: calc(var(--cw-puck) / -2) 0 0 calc(var(--cw-puck) / -2);
    border-radius: 50%;
    background: oklch(0.7 0 0);
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px #ccc, 0 1px 2px rgba(0, 0, 0, 0.15);
    left: 50%;
    top: 50%;
    z-index: 3;
    cursor: grab;
    touch-action: none;
    transform: scale(1);
    transition: transform 0.15s ease, width 0.15s ease, height 0.15s ease, margin 0.15s ease;
}

.color-wheel__puck:active,
.color-wheel.is-dragging .color-wheel__puck {
    cursor: grabbing;
    transform: scale(1.85);
}

.color-wheel:focus {
    outline: none;
}

.color-wheel:focus-visible {
    outline: 2px solid #0000EE;
    outline-offset: 4px;
    border-radius: 50%;
}

.color-wheel__readout {
    margin-top: 16px;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.9rem;
    color: #555;
    font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
    .color-wheel__puck {
        transition: none;
    }

    .color-wheel.is-dragging .color-wheel__puck {
        transform: scale(1.85);
    }
}

@media (max-width: 480px) {
    .color-wheel {
        --cw-size: min(210px, 72vw);
        --cw-ring: 2.5px;
        --cw-puck: 14px;
    }

    .color-wheel__dot {
        width: 12px;
        height: 12px;
        margin: -6px 0 0 -6px;
    }
}