/* Picker card */
.picker-card {
  display: grid;
  gap: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--card);
  padding: 1.1rem;
}

.picker-card .picker-preview {
  block-size: 4.5rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  transition: background-color 0.2s ease;
}

/* A checkerboard shows through translucent colors */
.picker-card .picker-checker {
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--border) 60%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--border) 60%, transparent) 25%, transparent 25%);
  background-size: 16px 16px;
}

.picker-card label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

.picker-card input[type="color"] {
  inline-size: 100%;
  block-size: 3rem;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.picker-card input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.picker-card input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--border);
  border-radius: 0.7rem;
}