/* ============================================================
   Color Picker
   Styled native <input type="color"> with swatch preview.
   Input sits transparently over swatch — click anywhere to open.
   ============================================================ */

.color-picker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* ── Swatch (visible color circle) ── */
.color-picker__swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-bg-secondary);
  flex-shrink: 0;
  background: var(--cp-color, #118bee);
  position: relative;
}
.color-picker__swatch:hover {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-link) 20%, transparent);
}

/* ── Native input — transparent overlay on swatch ── */
.color-picker__input {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* ── Label ── */
.color-picker__label {
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
}

/* ── Hex/value display ── */
.color-picker__value {
  font-size: 0.8rem;
  font-family: monospace;
  color: var(--color-text-secondary);
  padding: 4px 8px;
  border: 1px solid var(--color-bg-secondary);
  border-radius: var(--border-radius);
  background: var(--color-bg);
  min-width: 70px;
  text-align: center;
}

/* ── Sizes ── */
.color-picker--sm .color-picker__swatch { width: 26px; height: 26px; }
.color-picker--lg .color-picker__swatch { width: 48px; height: 48px; }