/* css/_ll-swatches.css */
.swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.18);
  box-shadow: 0 1px 1.5px rgba(0,0,0,.06);
  background: var(--swatch, #EDEFF3);
  cursor: pointer;
  position: relative;
  outline: none;
  transition: transform .12s ease, box-shadow .15s ease;
}

.swatch:hover { transform: scale(1.06); }
.swatch:active { transform: scale(0.96); }

.swatch[aria-checked="true"] {
  /* subtle magical ring */
  box-shadow:
    0 0 0 3px rgba(138,169,255,.35),
    inset 0 0 0 2px rgba(255,255,255,.95);
}

.swatch:focus-visible {
  box-shadow:
    0 0 0 3px rgba(138,169,255,.55),
    inset 0 0 0 2px rgba(255,255,255,1);
}

/* Optional: hide the raw <select>. Remove if you want it visible. */
#taskColor { display: none; }