/* Color wheel - a draggable HSL wheel canvas beside its harmony controls, then a grid of
   harmony swatches. Markers are drawn on the canvas in JS; this file owns layout, sliders,
   and the swatch grid. Swatch chips render the user's literal colors; everything else uses
   theme tokens only. */

.color-wheel { max-width: 920px; margin: 0 auto; }

.tool-title { margin: 0 0 6px; }
.tool-intro { margin: 0 0 24px; color: var(--muted); }

.cw-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 28px;
}
@media (max-width: 640px) {
    .cw-layout { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
}

/* Wheel canvas: fixed buffer, fluid on-screen up to its natural size. */
.cw-wheel-wrap { display: flex; justify-content: center; }
.cw-wheel {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
    touch-action: none; /* let pointer drags work without the page scrolling */
    cursor: crosshair;
    border-radius: 50%;
}

/* Controls column */
.cw-controls {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 360px;
}
.cw-field { display: flex; flex-direction: column; gap: 8px; }
.cw-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}
.cw-value { font-variant-numeric: tabular-nums; color: var(--text); }
.cw-select { width: 100%; }

/* Range sliders, themed to the accent. */
.cw-range {
    width: 100%;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Swatch grid */
.cw-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.cw-swatch {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

/* The literal color fills the chip; its text color is JS-picked for contrast. */
.cw-chip {
    height: 72px;
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.cw-meta { display: flex; flex-direction: column; gap: 2px; }
.cw-hex {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.cw-hsl { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.cw-copy { align-self: flex-start; }